1

I have a simple code that produces a rectangle in the canvas. The width of the rectangle is the width of the viewport, and for some reason, the shape produced has a blur on all 4 borders. I attempted to replicate it on jsfiddle but the shape came out sharp and normal.

HTML

<body>
    <canvas id="bg_canvas"></canvas>
</body>

Javascript/jQuery

$(document).ready(function(){
// Expand canvas to full viewport size
    var vp_width = $(window).width();
    var vp_height = $(window).height();

    $("#bg_canvas").width(vp_width);
    $("#bg_canvas").height(vp_height);

// Canvas Drawing
    var canvas = document.getElementById("bg_canvas");
    var ctx = canvas.getContext("2d");

    ctx.fillStyle = "#cbf7ed";
    ctx.fillRect(10,10,vp_width,5);
});

Blur

Sanph
  • 11
  • 2
  • Isn't your page on zoom somehow? As the canvas is made of bitmap data, the browser may blur it on edges when zooming in and out. – Brian Sandes Aug 09 '17 at 20:26
  • First thing I checked, but it's not zoomed in. The image attached is zoomed in however, to show the blur more clearly. – Sanph Aug 09 '17 at 20:32
  • `$(el).width()` and `$(el).height()` set CSS `width` and `height` properties. You canvas image is still 300x150px wide, and is stretched by CSS, thus trigerring antialiasing. – Kaiido Aug 10 '17 at 03:42
  • Possible duplicate of [Canvas is stretched when using CSS but normal with "width" / "height" properties](https://stackoverflow.com/questions/2588181/canvas-is-stretched-when-using-css-but-normal-with-width-height-properties) – Kaiido Aug 10 '17 at 03:43

0 Answers0