0

I have a canvas inside a div and it fills the whole div. I draw a line on canvas but when I resize browser window, width of the line on the canvas changes, as I increase browser window size its thickness increases and adds some blur to the line. I figured out that problem occurs here; I dont use a fixed size for canvas instead I use %100 for the width and height.

#myCanvas{
margin:0;
padding: 0;
border:0;
width: 100%;
height: 100%;
background-color: white;

} When I used fixed size in pixeel for width and height, it's ok. But I want my canvas to resize without disturbing the drawing inside. You can play around here: http://codepen.io/ertugrulmurat/pen/nxhof

Just try to change the heigth of browser window. Any idea would be appreciated.

Ertugrul
  • 35
  • 7
  • For canvas width property look: http://stackoverflow.com/questions/2588181/canvas-is-stretched-when-using-css-but-normal-with-width-height-properties. – Ertugrul Aug 06 '14 at 14:37

2 Answers2

0

This is unfortunately quite involved to fix. Essentially you need to:

  1. Add an event listener to the window for the resize event and
  2. change the width/height attributes on the canvas tag (not the css, that stays at 100%) every time the window resizes
  3. You will also need to redraw the line every time the resize happens.

Remember the width/height attributes are unitless so make sure you set it to something like width="100" and not width="100px"

Here is the relevant section of your code with the corrections in place:

if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  ctx.canvas.width = ctx.canvas.clientWidth;
  ctx.canvas.height = ctx.canvas.clientHeight;      
  var draw = function(){
    ctx.lineWidth = 0.5;
    ctx.shadowBlur = 0;
    ctx.strokeStyle="#FF0000";       
    ctx.beginPath();
    ctx.lineWidth=0.5;
    ctx.lineCap="round";
    ctx.moveTo(20,20);
    ctx.lineTo(200,20);
    ctx.stroke();
    ctx.closePath();
  }

  window.addEventListener('resize', function(){
    ctx.canvas.width = ctx.canvas.clientWidth;
    ctx.canvas.height = ctx.canvas.clientHeight;
    draw();
  });
  draw();
}
david
  • 17,925
  • 4
  • 43
  • 57
  • By the way I learned that reseting the width and height of canvas, automatically clears it! – Ertugrul Aug 06 '14 at 14:19
  • Yep. Infact back in the day that was the fastest way to clear the canvas. That's probably changed by now. – david Aug 06 '14 at 22:37
0

I've taken a look around and it seems that the canvas element doesn't deal well with CSS, and it's best to define the width and height as part of the tag, such as

<canvas width="200" height="100"></canvas>

Of course the only problem is that those values are only in px. My work around would be to use javascript to therefore collect the parent size and enter the new value on the resize event. I have wrote all this out in a jsfiddle for you and it works brilliantly if you resize.

Note that I call the redraw function every time it is resized. If you fail to do this, it goes blank until the next click.

http://jsfiddle.net/N23w2/1/

Adam Whitney
  • 106
  • 4