All geek questions in one place

Canvas image does not appear on load

Here I am trying to make a circle using several arc shapes. as below:

var startAngle = 0; var arc = Math.PI / 6; var ctx; var leftValue=275; var topValue=300; var wheelImg = "http://i.stack.imgur.com/wwXlF.png"; function drawWheelImg() { var canvas = document.getElementById("canvas"); if(canvas.getContext) { var outsideRadius = 260; var textRadius = 217; var insideRadius = 202; ctx = canvas.getContext("2d"); for(var i = 0; i < 12; i++) { var angle = startAngle + i * arc; ctx.beginPath(); ctx.arc(leftValue, topValue, outsideRadius, angle, angle + arc, false); ctx.arc(leftValue, topValue, insideRadius, angle + arc, angle, true); ctx.fill(); ctx.closePath(); ctx.beginPath(); ctx.arc(leftValue, topValue, outsideRadius, angle, angle + arc, false); ctx.shadowBlur=3; ctx.shadowColor="#A47C15"; ctx.stroke(); ctx.closePath(); ctx.save(); ctx.translate(leftValue + Math.cos(angle + arc / 2) * textRadius, topValue + Math.sin(angle + arc / 2) * textRadius); ctx.rotate(angle + arc / 2 + Math.PI / 2); var imgName = wheelImg; var img = new Image(); img.src = wheelImg; ctx.drawImage(img,-44, -25,50,40); ctx.restore(); } } } function spin() { drawWheelImg(); } drawWheelImg(); 
 <button class="btnSpin" onclick="spin();">Spin</button> <canvas id="canvas" width="550" height="580"></canvas>

Problem:

Now the problem is that when I load the page, I call a function that draws a circle using an arc and draws an image in an arc. But that does not work.

And if I call the same function when I click the button, it works and displays the image.

I found a lot, but did not get a solution. I don’t know why the image is not displayed when loading.

Any help would be greatly appreciated.

+1
source share
1 answer

The fact is that you need to wait until the image is loaded before drawing it.

My best option to get your code to work is to wrap the entire canvas drawing in the image.onload function, because in this way you can be sure that it will be displayed as soon as you actually start drawing it.

I am sending you a working plunkr code

 var startAngle = 0; var arc = Math.PI / 6; var ctx; var leftValue = 275; var topValue = 300; var wheelImg = "http://i.stack.imgur.com/wwXlF.png"; function drawWheelImg() { var canvas = document.getElementById("canvas"); if (canvas.getContext) { var imgName = wheelImg; var img = new Image(); img.src = wheelImg; img.onload = function() { var outsideRadius = 260; var textRadius = 217; var insideRadius = 202; ctx = canvas.getContext("2d"); for (var i = 0; i < 12; i++) { var angle = startAngle + i * arc; ctx.beginPath(); ctx.arc(leftValue, topValue, outsideRadius, angle, angle + arc, false); ctx.arc(leftValue, topValue, insideRadius, angle + arc, angle, true); ctx.fill(); ctx.closePath(); ctx.beginPath(); ctx.arc(leftValue, topValue, outsideRadius, angle, angle + arc, false); ctx.shadowBlur = 3; ctx.shadowColor = "#A47C15"; ctx.stroke(); ctx.closePath(); ctx.save(); ctx.translate(leftValue + Math.cos(angle + arc / 2) * textRadius, topValue + Math.sin(angle + arc / 2) * textRadius); ctx.rotate(angle + arc / 2 + Math.PI / 2); ctx.drawImage(img, -44, -25, 50, 40); ctx.restore(); } } } } drawWheelImg(); 
 <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <canvas id="canvas" width="550" height="400"></canvas> <script src="script.js"></script> </body> </html>
+1
source

Source: https://habr.com/ru/post/1239825/

More articles:


All Articles