CODEWITHSUNDEEP
javascripthtmlcanvas
Mike
Mike

Reputation: 265

Canvas Line Width changes when canvas width changes

I don't know if there will be a solution to this.

I have a canvas element which I wish to change the width of. That's easy enough, I know, but when the width changes, the lines in the drawing also go thinner/thicker when the width goes narrower/wider.

I could probably get around this by redrawing the image and playing around with scaling and lineWidth, etc, but I do not want to re-draw every time the width changes (I am changing the width using setInterval, so I don't think redrawing every 40-50 - or less - milliseconds is a reasonable/doable solution).

Can anyone think of a way to get around this?

A simple explanation to explain, I have:

ctx.beginPath()
ctx.strokeStyle="#000000";
ctx.lineWidth=1;
ctx.strokeRect(10, 10, 400, 400);

So when the width of canvas changes, the lineWidth becomes less than 1 pixel, to a point where it becomes "broken" and disappears.

In writing this question I am think more and more that the only solution would be to redraw the image but please let me know your thoughts.

ADDITION*** I am using this to change width, hope it makes sense:

repeater = setInterval(function() {
    $(".action").css("width", originalWidth - borderRight - borderLeft + (mouseX - clickX));
}, 40);

I check when mouse is over right edge of canvas, then on "mousedown" originalWidth, borderRight, borderLeft, mouseX and clickX are set outside of repeater, so as mouse moves left and right the width increases/decreases. The interval is cleared on "mouseup", of course.

Thanks, Mike

Upvotes: 0

Views: 1287

Answers (1)

Philipp
Philipp

Reputation: 69663

Do not use CSS to rescale a canvas. When you use CSS, you scale the output of the canvas in the HTML layout, but don't change the internal resolution.

Change the width and height attribute of the canvas HTML node instead.

Upvotes: 2

Related Questions