Why can’t the square get to canvas?

Question

How to fill the area, why is it a rectangle? Shouldn't the coordinate grid be in pixels?

<canvas id="canvas"></canvas> <style type="text/css"> #canvas { height: 500px; width: 500px; } </style> <script type='text/javascript'> var w = 50; var h = 50; var pointR = 10; var x = (w / 2); var y = (h / 2); var c = document.getElementById('canvas'); var ctx = c.getContext('2d'); // Create gradient var grd = ctx.createRadialGradient(x, y, 9, x, y, 10); grd.addColorStop(0, '#fff'); grd.addColorStop(1, '#000'); // Fill with gradient ctx.fillStyle = grd; ctx.fillRect(0, 0, w, h); </script>

ampawd ampawd 2,568 one 6 23 · Accepted Answer · 2016-08-11T18:56:37

because the canvas dimensions should be specified in the canvas tag

 var w = 50; var h = 50; var pointR = 10; var x = (w / 2); var y = (h / 2); var c = document.getElementById('canvas'); var ctx = c.getContext('2d'); // Create gradient var grd = ctx.createRadialGradient(x, y, 9, x, y, 10); grd.addColorStop(0, '#fff'); grd.addColorStop(1, '#000'); // Fill with gradient ctx.fillStyle = grd; ctx.fillRect(0, 0, w, h);

 #canvas { height: 500px; width: 500px; }

 <canvas width="500" height="500" id="canvas"></canvas>

Why can’t the square get to canvas?

1 answer 1

More articles: