Rectangle In A Canvas Has Soft Edges

Question

I have a yellow canvas inside of which I draw a red rectangle. But, I noticed an interesting effect--the two sides of the rectangle that are on the border have very defined edges, while the two sides of the rectangle that are inside of the yellow canvas are "softened" or "blurred".

This is what I have now: interesting rectangle

My HTML:

<canvas id="myCanvas"> 
</canvas>

Javascript:

var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);

CSS:

#myCanvas {
    background-color:#FFFF00;
    width:1000px;
    height:600px;
    border: none;
    margin-left:auto;
    margin-right:auto;
}

JSFIDDLE

Why does this happen? And how can I make all four sides of the rectangle very exact and defined? Thank you.

Removing all CSS makes the blur go away, still confused about why its being blurred in the first place. Good luck! — bottens, Apr 08 '14 at 20:01
Anti-aliasing, possibly? See http://stackoverflow.com/questions/195262/can-i-turn-off-antialiasing-on-an-html-canvas-element. — dgvid, Apr 08 '14 at 20:03

aneelkkhatri · Accepted Answer · 2014-04-08T20:10:03.100

9

You should set canvas size like this:

<canvas id="myCanvas" width="1000" height="600"></canvas>

here's the demo

or from javascript:

var canvas = document.getElementById("myCanvas");
canvas.width  = 1000;
canvas.height =  600;

setting size from CSS just scales the canvas which is not what you want!

edited Apr 08 '14 at 20:10

answered Apr 08 '14 at 20:04

aneelkkhatri

404
3
10

1

Makes sense, seeing as how the width in css appears to be stretching the box that is being filled in with javascript, making the blur pixelated – bottens Apr 08 '14 at 20:05
Mark it as answer if it made it clear why canvas was stretchy! :D – aneelkkhatri Apr 08 '14 at 20:07
2

This also explains the excessively large size of the rectangle. Thank you! :) – 416E64726577 Apr 08 '14 at 20:15

score 2 · Answer 2 · answered Apr 08 '14 at 20:06

Your CSS is streching your canvas, rather than defining the size of it which causes it to blur. Define your canvas size in the HTML as aneelkkhatri did, or you can define it in your Javascript, see the jsfiddle below.

http://jsfiddle.net/S6vmh/5/

var canvas=document.getElementById("myCanvas");
canvas.width  = 1000;
canvas.height = 600;

var ctx=canvas.getContext("2d");
ctx.wdith=1000;
ctx.fillStyle="#FF0000";
ctx.fillRect(1,1,150,75);

Thank you for your help! – 416E64726577 Jul 10 '15 at 13:40 — 416E64726577, Jul 10 '15 at 13:40

score 2 · Answer 3 · answered Jan 02 '20 at 01:44

2

For anyone who has this issue when doing a dynamic resizing of the canvas, try changing the imageSmoothing parameter to false

context = canvas.getContext("2d");
context.imageSmoothingEnabled = false;

answered Jan 02 '20 at 01:44

JPrier

21
1

score 1 · Answer 4 · answered Apr 08 '14 at 20:09

1

Probably it is scaled from some size. Update: it is scaled from default 300x150 (canvas on mdn)

Try setting width height directly on canvas element.

<canvas id="myCanvas" width="400" height="200"></canvas>

and don't resize it with CSS

#myCanvas {
  background-color:#FFFF00;
  border: none;
  margin-left:auto;
  margin-right:auto;
}

http://jsfiddle.net/T3yU2/

answered Apr 08 '14 at 20:09

jodator

2,445
16
29

Thank you! This is why the rectangle was so large and so blurry :) – 416E64726577 Apr 08 '14 at 20:19

score 0 · Answer 5 · answered Nov 06 '17 at 01:21

0

Also make sure you don't set the canvas opacity in CSS, in my case this resulted in blurriness. Moving to RGBA on fillStyle fixed it.

answered Nov 06 '17 at 01:21

Razvan Cercelaru

628
5
6

Rectangle In A Canvas Has Soft Edges

5 Answers5