draw crisp lines on HTML5 canvas with browser zoom

Question

When setting the browser zoom to 150% and drawing a line on a canvas, the line is blurry. When I double the width and height of the canvas and downscale it to the original width and height with css, lines are crisp.

The top triangle is blurry while the bottom triangle is crisp: http://jsbin.com/acimiq/1

Is it a browser bug, OS bug or am I missing something?

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>canvas test</title>
<style id="jsbin-css">
#canvas1 {
    image-rendering: optimizeSpeed;             // Older versions of FF
    image-rendering: -moz-crisp-edges;          // FF 6.0+
    image-rendering: -webkit-optimize-contrast; // Webkit
                                                //  (Safari now, Chrome soon)
    image-rendering: -o-crisp-edges;            // OS X & Windows Opera (12.02+)
    image-rendering: optimize-contrast;         // Possible future browsers.
    -ms-interpolation-mode: nearest-neighbor;   // IE
}

#canvas2 {
  width: 300px;
  height: 150px;
}
</style>
</head>
<body>
  <canvas id="canvas1" width="300" height="150"></canvas>
  <br/>
  <canvas id="canvas2" width="600" height="300"></canvas>
<script>
    var canvas1 = document.getElementById('canvas1');
    var ctx1 = canvas1.getContext('2d');
    ctx1.imageSmoothingEnabled = false;
    ctx1.webkitImageSmoothingEnabled = false;
    ctx1.mozImageSmoothingEnabled = false;
    ctx1.beginPath();
    ctx1.moveTo(125,125);
    ctx1.lineTo(125,45);
    ctx1.lineTo(45,125);
    ctx1.closePath();
    ctx1.stroke();

    var canvas2 = document.getElementById('canvas2');
    var ctx2 = canvas2.getContext('2d');
    ctx2.scale(2, 2);
    ctx2.beginPath();
    ctx2.moveTo(125,125);
    ctx2.lineTo(125,45);
    ctx2.lineTo(45,125);
    ctx2.closePath();
    ctx2.stroke();
</script>
</body>
</html>

Canvas is just like any other bitmap-based image. It is not a vector so zooming will have blurring. — Diodeus - James MacFarlane, Jul 09 '13 at 16:39
I'm drawing a line when the browser is already zoomed and I'm asking it to disable antialiasing. — pablo, Jul 09 '13 at 16:46

score 2 · Answer 1 · answered Jul 09 '13 at 18:25

Use SVG (Scalable Vector Graphics) if you want to avoid blurry lines or problems with browser zoom. You can now write within your html file in html5.

Check out wikipedia's entry or w3school's entry on SVG to learn more.

Check out this site for when to use Canvas vs SVG:

score 1 · Accepted Answer · answered Jul 09 '13 at 18:18

The canvas is not aware of zoom or anything else in the browser. It does not matter if you zoom in the browser, what is drawn on canvas will be drawn at it as any other time as the bitmap used for canvas is of fixed size no matter what zoom the browser displays it at /that's a post-canvas process).

You cannot disable interpolation etc. for the browser. What happens is that when you zoom the browser it sees the canvas element just as any image and will enlarge it as it does with images.

If you draw a line to canvas afterwards the line is rendered to canvas as usual, then on update the browser refreshes everything that is needed and if a new line is drawn the canvas is redrawn - as an image - just with the new content.

Canvas doesn't know about browser, browser doesn't know about what's inside the canvas besides from that it holds some pixels.

draw crisp lines on HTML5 canvas with browser zoom

2 Answers2