CODEWITHSUNDEEP
htmlcanvas
pablo
pablo

Reputation: 2809

draw crisp lines on HTML5 canvas with browser zoom

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?

Related

I've tested on Chrome 27, FF 22 and IE 10 on Windows 7.

<!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>

Upvotes: 2

Views: 3336

Answers (2)

zigo
zigo

Reputation: 159

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:

Upvotes: 2

user1693593
user1693593

Reputation:

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.

Upvotes: 1

Related Questions