CODEWITHSUNDEEP
javascripthtmlcsscanvashtml5-canvas
Katembers
Katembers

Reputation: 133

Lines outside of canvas

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!

Upvotes: 0

Views: 661

Answers (1)

Vula
Vula

Reputation: 34

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>

Upvotes: 2

Related Questions