There is such code:

<!DOCTYPE html> <html> <head> <title>Canvas from scratch</title> <meta charset="utf-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> function getRandomInt() { return Math.floor(Math.random() * (255 - 0)) + 0; } $(document).ready(function() { var coin = new Image(); coin.src = 'coin.png'; var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); for (var i = 0; i < 10; i++) { var coordinates = 70*i; ctx.fillStyle = "rgb("+getRandomInt()+", "+getRandomInt()+", "+getRandomInt()+")"; ctx.fillRect(coordinates, 0, 70, 70); ctx.font = "bold 30px Verdana,sans-serif"; ctx.lineWidth = 1; ctx.textAlign = 'center'; ctx.strokeText("Н", 70*(i+.5), 50); ctx.drawImage(coin, 50*(i+.5), 50); } }); </script> </head> <body> <canvas id="canvas" width="700" height="70"> <!-- Insert fallback content here --> </canvas> </body> </html>

Where coin.png enter image description here This is a 16x16 picture, and it should be centered in the middle, that is, in each square there is this picture in the middle right on the letter H , I tried to do ctx.textAlign = 'center'; but it does not apply to the picture.

Ps I would also like to ask why if you press Ctrl+F5 pictures do not appear, but if you just update all the rules

    1 answer 1

    As I understand it is necessary to wait for the picture to load. And only after that draw it. That is, it is necessary to take this drawing out of the first cycle.

    Also drawing on the center of the picture is completely exposed to the general principles:

     ΠΊΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Π°Π’Π½ΡƒΡ‚Ρ€Π΅Π½Π½Π΅ΠΉΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈΠŸΠΎX = Π¨ΠΈΡ€ΠΈΠ½Π°ΠžΠ±Π΅Ρ€Ρ‚ΠΊΠΈΠŸΠΎX / 2 - ΡˆΠΈΡ€ΠΈΠ½Π°ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ / 2;

    because coordinates start from the left upper corner, then in the Π¨ΠΈΡ€ΠΈΠ½Π°ΠžΠ±Π΅Ρ€Ρ‚ΠΊΠΈΠŸΠΎX / 2 coordinate by Π¨ΠΈΡ€ΠΈΠ½Π°ΠžΠ±Π΅Ρ€Ρ‚ΠΊΠΈΠŸΠΎX / 2 will be a left border of the picture. And so that it was in the center - it is necessary to shift it to the left. How much? Correct - also half.

    knowing this, it turns out:

      ctx.drawImage(coin, 70 * (i + .5) - (coin.width / 2), 5);

    Total:

     function getRandomInt() { return Math.floor(Math.random() * (255 - 0)) + 0; } $(document).ready(function() { var coin = new Image(); var rectCount = 10; coin.src = 'http://i.stack.imgur.com/Mnyl3.png'; var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); for (var i = 0; i < rectCount; i++) { var coordinates = 70 * i; ctx.fillStyle = "rgb(" + getRandomInt() + ", " + getRandomInt() + ", " + getRandomInt() + ")"; ctx.fillRect(coordinates, 0, 70, 70); ctx.font = "bold 30px Verdana,sans-serif"; ctx.lineWidth = 1; ctx.textAlign = 'center'; ctx.strokeText("Н", 70 * (i + .5), 50); } coin.onload = function() { for (var i = 0; i < rectCount; i++) { ctx.drawImage(coin, 70 * (i + .5) - (coin.width / 2), 5); } }; }); 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <canvas id="canvas" width="700" height="70"> <!-- Insert fallback content here --> </canvas>