Lines outside of canvas

Question

I define a canvas as <canvas id="maincanvas" class="canvas"></canvas> with the style

.canvas {
    width: 1000px;
    height: 750px;
    border: 1px dotted;
}

Then I try to draw a line from the upper-left to the lower-right with:

function GenerateSym() {
    var c = document.getElementById("maincanvas");  
    var ctx = c.getContext("2d");
    ctx.lineWidth = 1;
    ctx.beginPath();
    ctx.moveTo(5, 5);
    ctx.lineTo(995, 745);
    ctx.stroke();

Unfortunately, the line seems to start just a few px too low. While it leaves the canvas entirely on the bottom-center instead of ending just before the bottom-right corner. Additionally, the line seems to be at least 3px wide with terrible anti-aliasing.

I'm running Mint 18 with Firefox 58. Thanks!

score 2 · Accepted Answer · answered Mar 17 '18 at 16:27

You cannot use CSS style for resizing of the canvas element, or you will run into this issue. The canvas DOM element has properties width and height which equel to attributes "width=.." and "height=.." . As said here: Canvas width and height in HTML5 . So the correct thing to do would be:

.canvas{ style: 1px dotted;}

and

<script>
var c = document.getElementById("maincanvas");  
var ctx = c.getContext("2d");
c.width= 1000;
c.height= 750;
ctx.beginPath();
ctx.lineWidth = 1;
ctx.moveTo(5, 5);
ctx.lineTo(995, 745);
ctx.stroke();</script>

Lines outside of canvas

1 Answers1