scaling logo in html5 <canvas>

Question

Having trouble scaling with . It seems to make sense to code up a drawing in canvas to a fixed size (ie 800x600) then scale it for specific locations - but sizing occurs in 4 places: 1) in the context definition (ie ctx.width = 800 2) with ctx.scale; 3) in html with but this doesn't appear right - it seems to want the scale to be proportional. css sizing simply makes it fuzzy so not a good way to go. Any ideas?

Answer 1

Actually, you can resize a canvas using stylesheets. The results may vary across browsers as HTML5 is still in the process of being finalized.

There is no width or height property for a drawing context, only for canvas. A context's scale is used to resize the unit step size in x or y dimensions and it doesn't have to be proportional. For example,

context.scale(5, 1);

changes the x unit size to 5, and y's to 1. If we draw a 30x30 square now, it will actually come out to be 150x30 as x has been scaled 5 times while y remains the same. If you want the logo to be larger, increase the context scale before drawing your logo.

Mozilla has a good tutorial on scaling and transformations in general.

Edit: In response to your comment, the logo's size and canvas dimensions will determine what should be the scaling factor for enlarging the image. If the logo is 100x100 px in size and the canvas is 800x600, then you are limited by canvas height (600) as its smaller. So the maximum scaling that you can do without clipping part of the logo outside canvas will be 600/100 = 6

context.scale(6, 6)

These numbers will vary and you can do your own calculations to find the optimal size.

Answer 2

thks but it doesn't really solve the problem - resizing using css left the image really blurry - scale does resize cleanly but there's a problem of matching what is defined in the canvas and what is listed in the html tag. I'm looking for the right combination.

Answer 3

You could convert the logo to svg and let the browser do the scaling for you, with or without adding css mediaqueries.

Check out Andreas Bovens' presentation and examples.

Answer 4

You can resize the image when you draw it

imageobject=new Image();
imageobject.src="imagefile";
imageobject.onload=function(){
    context.drawImage(imageobject,0,0,imageobject.width,imageobject.height,0,0,800,600);
}

The last 2 arguments are the width an height to resize the image

http://www.w3.org/TR/html5/the-canvas-element.html#dom-context-2d-drawimage

Answer 5

If you set the element.style.width and element.style.height attributes (assuming element is a canvas element) you are stretching the contents of the canvas. If you set the element.width and element.height you are resizing the canvas itself not the content. The ctx.scale is for dynamic resizing whenever you drawing something with javascript and gives you the same stretching effect as element.style.