What is the best practice to deal with canvas size with css

HTML & CSS
1

I’ve loaded my images to canvas to manipulate them at pixel level.
However, the best practice I can find is to set canvas size like this:


<canvas id=c width=800 height=600></canvas>

But when I control the canvas dimension with css like


#c {
	width: 800px;
	height: 600px;
}

I found that the image quality is different and much worst.
How do I keep the image quality with css as I need my website to be responsive.

Thank you,

2

Found this with a Google search. See if it helps.

3

Thank you very much for your help.
It doesn’t explain how to control canvas with css.
Still image is not quite a problem. It’s the video.
I conceal both images and videos in the background. So users will only see canvas and it would display both still and motion images base on user’s interaction (load the content to it).

With static setting of the HTML DOM, it can’t be responsive in regard to user’s device screen.

4

I don’t really think his is a CSS question as such but I’ve not really delved into the canvas element so this may be wide of the mark. However, from what I gather the canvas element element is a fixed size and if you are trying to stretch it with percentage measurements then you would need to redraw it which of course would take some time.

If you are saying that width:800px in the CSS behaves differently from width=“800px” in the html then that sounds odd but of course the solution is to use the html attributes instead. If on the other hand you are using percentages in the css then that is likely to be awkward and you can find some relevant info below.

http://www.garygarside.com/labs/responsive-canvas/

http://community.createjs.com/discussions/createjs/330-make-canvas-size-responsive
http://www.sitepoint.com/7-reasons-to-consider-svgs-instead-of-canvas/