SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict ketting00's Avatar
    Join Date
    Jul 2011
    Posts
    309
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

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

    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:
    Code:
    <canvas id=c width=800 height=600></canvas>
    But when I control the canvas dimension with css like
    Code:
    #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. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,220
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Found this with a Google search. See if it helps.

    http://sixrevisions.com/html/canvas-element/

  3. #3
    SitePoint Addict ketting00's Avatar
    Join Date
    Jul 2011
    Posts
    309
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    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://alexkehayias.tumblr.com/post/...-processing-js
    http://community.createjs.com/discus...ize-responsive
    http://www.sitepoint.com/7-reasons-t...ead-of-canvas/


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •