0

I'm looking to make a canvas containing an image that's dynamically sized and can be interacted with. Since making the canvas dynamically sized will cause issues with the pixel ratio, I must start from the other end; dynamically sizing the image, then passing the image into the canvas to set the canvas width and height.

I'm using getComputedStyle() and getPropertyValue() to retrieve the dimensions of the image inside the JavaScript file. However, the issue is that I cannot retrieve the computed style of the image if I only want to show the canvas.

If I have #image { display: none; width: 100%; }, calling getPropertyValue("width") on my image will return 100 rather than the actual computed size of the image. Removing display: none allows me to retrieve the actual dimensions, but then I have two copies, one inside the canvas and one regular img.

Here is a JSFiddle showing the problem in action

andrewhep
  • 1
  • 2
  • The canvas can not contain a copy of the image. The canvas holds pixels, and will hold a copy of the pixels that the image contains. There will only be one copy of the image unless you load it as a new Image. – Blindman67 Aug 13 '20 at 21:18
  • @Blindman67 That's good to know, thank you. With that in mind, is there anyway to retain the computed style of an image while still only using it in the canvas? display: none works for just holding an image to be used in the canvas, but it cannot be resized dynamically this way. – andrewhep Aug 13 '20 at 21:41
  • Just load the image into memory (no need for it to be on the page), when loaded set the canvas resolution to match the image and draw the image on the canvas, Set the canvas to the same CSS rules you have currently on the image. To load and draw image onto canvas `const img = new Image; img.src = "imgURL"; img.onload = ()=>{canvas.width=img.naturalWidth;canvas.height=img.naturalHeight;canvas.getContext("2d").drawImage(img,0,0);}` – Blindman67 Aug 13 '20 at 22:41
  • The reason I had the image on the page is that I need to be able to have the canvas dynamically sized, but still able to be manipulated. If I change the width or height of the canvas, it breaks the pixel ratio for mouse coordinates. Therefore, I need to be able to resize the image realtime before it goes into the canvas, while never rendering the image anywhere else. It seems strange, but there seem to be no alternatives: https://stackoverflow.com/questions/18679414/how-put-percentage-width-into-html-canvas-no-css – andrewhep Aug 13 '20 at 23:22
  • "...pixel ratio for mouse coordinates" not sure what you mean by that as the aspect of the canvas is the same as that of the image. The canvas resolution (if using the code in prev comment) is the same as the image. The pixel coordinates on the canvas will be scaled by the canvas page size (computed style) divide the canvas resolution. Eg for x the coord is `pixelX = mouseEvent.offsetX * canvasComputedWidth / canvas.width` Same for height `pixelY = mouseEvent.offsetY * canvasComputedHeight / canvas.height` Info on offset https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/offsetX – Blindman67 Aug 14 '20 at 00:46

0 Answers0