I have some SVG Images and I want to use it in my project.
In the project I have an onscroll function and the function redraw the whole canvas for me each time user scrolls.
when I load the Image like a file in canvas, each time that canvas clears and redraw, the images has a little delay to show up again.
look at the below image:
when user scrolls, image will disappears:
and then show up again after onscroll function and redrawing canvas.
I tried to create images with this code:
const gradientStyle4 = ctx.createLinearGradient(
12.0417,
0,
12.0417,
29.7376
);
gradientStyle4.addColorStop(0, "#A8E0E5");
gradientStyle4.addColorStop(1, "#669FFF");
ctx.fillStyle = gradientStyle4;
var img1 = new Path2D(
"M3.54167 0H20.5417C23.375 0.954262 24.0833 1.90852 24.0833 4.94803V12.2075C24.0833 13.4233 24.0833 13.4233 22.8438 13.5505C21.0975 13.6931 19.417 14.2803 17.9631 15.256C16.5092 16.2318 15.3304 17.5634 14.5394 19.1236C13.7485 20.6837 13.3718 22.4203 13.4454 24.1673C13.5191 25.9142 14.0405 27.6131 14.96 29.1015C15.0663 29.2852 15.3213 29.4337 15.1725 29.7376C11.2625 29.7376 7.34542 29.7376 3.42833 29.7376C2.71069 29.6764 2.03108 29.3892 1.4875 28.9177C0.802538 28.3174 0.289272 27.5467 0 26.684L0 3.18087C0.224976 2.36887 0.677921 1.63798 1.30543 1.0744C1.93294 0.510813 2.70885 0.138029 3.54167 0V0ZM12.0417 14.1938C14.0817 14.1938 16.1146 14.1938 18.1475 14.1938C19.21 14.1938 19.8404 13.6707 19.8546 12.8225C19.8688 11.9742 19.2242 11.3734 18.1192 11.3734H5.95708C4.89458 11.3734 4.27833 11.9106 4.25708 12.7871C4.23583 13.6636 4.8875 14.2008 5.9925 14.2008C7.99708 14.2008 10.0088 14.1938 12.0417 14.1938ZM9.20833 19.8486C10.3063 19.8486 11.3971 19.8486 12.4879 19.8486C13.5788 19.8486 14.1596 19.2973 14.1525 18.4349C14.1542 18.2327 14.1125 18.0325 14.03 17.8478C13.9476 17.6631 13.8265 17.4982 13.6747 17.3642C13.523 17.2302 13.3442 17.1303 13.1505 17.0711C12.9568 17.0119 12.7526 16.9949 12.5517 17.0212C10.3133 17.0212 8.07028 17.0212 5.8225 17.0212C5.44678 17.0212 5.08644 17.1702 4.82077 17.4353C4.55509 17.7004 4.40583 18.06 4.40583 18.4349C4.40583 18.8099 4.55509 19.1695 4.82077 19.4346C5.08644 19.6997 5.44678 19.8486 5.8225 19.8486C6.97708 19.8557 8.09625 19.8416 9.20833 19.8416V19.8486ZM8.43625 8.53888C9.37833 8.53888 10.3275 8.53888 11.2696 8.53888C11.4557 8.54742 11.6416 8.51926 11.8168 8.456C11.9919 8.39275 12.1529 8.29564 12.2904 8.17023C12.4279 8.04483 12.5393 7.89359 12.6181 7.72518C12.697 7.55677 12.7418 7.37449 12.75 7.18877C12.7567 6.999 12.7249 6.80983 12.6567 6.63256C12.5885 6.45529 12.4852 6.29354 12.353 6.15698C12.2208 6.02042 12.0624 5.91184 11.8872 5.83772C11.712 5.7636 11.5236 5.72546 11.3333 5.72557C9.4775 5.72557 7.61458 5.72557 5.75875 5.72557C5.57271 5.72975 5.38932 5.77045 5.21904 5.84536C5.04877 5.92026 4.89494 6.0279 4.76635 6.16213C4.63776 6.29636 4.53692 6.45455 4.4696 6.62767C4.40227 6.80079 4.36977 6.98545 4.37396 7.1711C4.37814 7.35675 4.41893 7.53977 4.49399 7.70969C4.56906 7.87961 4.67692 8.03311 4.81143 8.16144C4.94594 8.28976 5.10446 8.39039 5.27794 8.45757C5.45142 8.52476 5.63646 8.55719 5.8225 8.55301C6.6725 8.55301 7.55792 8.53181 8.44333 8.53181L8.43625 8.53888Z"
);
ctx.fill(img1);
var img1 = new Path2D(
"M34 33.0457C33.072 34.2545 32.3283 34.311 31.2516 33.2507C30.3308 32.3389 29.3887 31.4412 28.5104 30.494C28.4395 30.3883 28.3472 30.2985 28.2395 30.2305C28.1318 30.1626 28.011 30.1178 27.8849 30.0992C27.7588 30.0805 27.6302 30.0884 27.5074 30.1223C27.3846 30.1562 27.2702 30.2154 27.1716 30.2961C25.9445 30.9375 24.562 31.2234 23.1805 31.1216C21.799 31.0198 20.4736 30.5342 19.3542 29.7199C18.2349 28.9055 17.3661 27.7949 16.8464 26.5135C16.3266 25.2321 16.1764 23.8311 16.413 22.4691C16.6495 21.107 17.2632 19.8381 18.1847 18.8059C19.1062 17.7738 20.2987 17.0195 21.6274 16.6285C22.9561 16.2375 24.3679 16.2252 25.7032 16.5932C27.0385 16.9611 28.244 17.6946 29.1833 18.7106C30.2165 19.7971 30.8866 21.1768 31.101 22.6593C31.3154 24.1418 31.0636 25.6542 30.3804 26.9879C30.2798 27.1208 30.2077 27.2729 30.1688 27.4348C30.1299 27.5967 30.1249 27.7649 30.1541 27.9288C30.1834 28.0928 30.2463 28.2489 30.3388 28.3874C30.4314 28.526 30.5516 28.6439 30.692 28.7339C31.8884 29.7828 32.9949 30.9295 34 32.1622V33.0457ZM23.7079 28.3239C24.6185 28.3281 25.5099 28.0627 26.2693 27.5614C27.0288 27.06 27.6223 26.3451 27.9746 25.5072C28.327 24.6693 28.4224 23.7459 28.2489 22.8538C28.0753 21.9617 27.6406 21.1411 26.9997 20.4955C26.3588 19.85 25.5404 19.4086 24.6481 19.2272C23.7559 19.0458 22.8297 19.1326 21.9868 19.4764C21.1439 19.8203 20.4221 20.4059 19.9127 21.1591C19.4033 21.9123 19.1292 22.7994 19.125 23.7081C19.1212 24.3117 19.2369 24.9102 19.4654 25.4691C19.6938 26.028 20.0306 26.5365 20.4564 26.9653C20.8821 27.3941 21.3885 27.7348 21.9464 27.968C22.5044 28.2011 23.103 28.3221 23.7079 28.3239Z"
);
ctx.fill(img1);
But I don't know how to change X and Y of the image. its always in 0 and 0 position of my canvas:
Can someone tell me how to move the image to where I want it?
