How put percentage width into html canvas (no css)

by

You need to set the size of the canvas in pixels or you will not only reduce the quality of its content but if you want to draw on it the mouse-coordinates will be off as well. Don’t use CSS to scale canvas if you’re gonna use it interactively.

I would recommend you adjust your image then adopt the canvas to whatever size the image is. You can do this by using getComputedStyle(element) which gives you whatever size the element is set to in pixels.

After image’s onload (as you need to be sure the image is actually loaded to get its size) or later if you change the image (CSS) size on the go, you can do this:

/// get computed style for image
var img = document.getElementById('myImageId');
var cs = getComputedStyle(img);

/// these will return dimensions in *pixel* regardless of what
/// you originally specified for image:
var width = parseInt(cs.getPropertyValue('width'), 10);
var height = parseInt(cs.getPropertyValue('height'), 10);

/// now use this as width and height for your canvas element:
var canvas = document.getElementById('myCanvasId');

canvas.width = width;
canvas.height = height;

Now the canvas will fit image but with canvas pixel ratio 1:1 to help you avoid problems when you’re gonna draw on the canvas. Otherwise you will need to convert/scale the mouse / touch coordinates as well.

More Related Contents:

  1. Canvas width and height in HTML5
  2. Draw on HTML5 Canvas using a mouse
  3. Drawing an SVG file on a HTML5 canvas
  4. html5 – canvas element – Multiple layers
  5. How can I convert an HTML element to a canvas element?
  6. How to Copy Contents of One Canvas to Another Canvas Locally
  7. HTML5 Canvas and Anti-aliasing [duplicate]
  8. Canvas drawings, like lines, are blurry
  9. Base64 PNG data to HTML5 canvas
  10. How to draw a rounded rectangle using HTML Canvas?
  11. How do I make a transparent canvas in html5?
  12. Can you take a “screenshot” of the page using Canvas?
  13. get click event of each rectangle inside canvas?
  14. canvas default size
  15. Gradient Stroke Along Curve in Canvas
  16. HTML5 Canvas slows down with each stroke and clear
  17. context.getImageData() operation is insecure
  18. What is the difference between SVG and HTML5 Canvas?
  19. How can I use custom fonts in an HTML5 Canvas element?
  20. Subpixel anti-aliased text on HTML5’s canvas element
  21. Create links in HTML canvas
  22. Browser Canvas CORS Support for Cross Domain Loaded Image Manipulation
  23. Draw SVG on HTML5 Canvas with support for font element
  24. Fast and responsive interactive charts/graphs: SVG, Canvas, other?
  25. Content Security Policy: “img-src ‘self’ data:”
  26. “Erasing” in html5 canvas
  27. Clear Canvas Rect (but keep background)
  28. Poor anti-aliasing of text drawn on Canvas
  29. HTML5 Canvas – Fill circle with image
  30. HTML canvas with scrollbar

Leave a Comment