Home/ Questions/Q 7584431
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T18:55:08+00:00

I’m mucking around with the canvas element and drawing, and a simple rectangle renders

  • 0

I’m mucking around with the canvas element and drawing, and a simple rectangle renders fewer pixels than it should. I can’t figure out why – happens in the latest Firefox, Safari and Mobile Safari browsers. I would expect this to fill the entire canvas.

screenshot

<html>
<body>
<canvas id="draw" style="width:100px;height:100px;border:1px solid #f00;"
onClick="doDraw(event)">
</canvas>
<script>
function doDraw(ev) {
    console.log(ev.clientX,ev.clientY);
    var el = document.getElementById('draw');
    var ctx = el.getContext('2d');

    ctx.fillRect(0,0,100,100);
}
</script>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    <canvas id="draw" style="width:100px;height:100px;border:1px solid #f00;"
onClick="doDraw(event)">

    needs to be 

    <canvas id="draw" width="100" height="100" style="border:1px solid #f00;"
onClick="doDraw(event)">

    you are modifying the style of the container, not the container. If that makes sense.

    • 0