Add CSS Resize Property to Canvas Element

Question

Can the CSS resize property be applied to canvas elements? Using the MDN document as a reference, the aribrary element example doesn't seem to work with canvas as the element.

HTML

<canvas width=300 height=300></canvas>

CSS

canvas {
  resize: both;
  overflow: hidden;
  border: 1px solid black;
}

I've created a jsfiddle with some other cases of the issues I've run into: https://jsfiddle.net/m540fevj/1/

In Chrome the first canvas element shows the resize property being applied to it, but not properly since it's not actually resizable. The second element shows that with a one pixel difference the resizableness of the element disappears. The third element shows that without drawing to it, it also doesn't appear to apply the property. The div element shows what I ultimately want the canvas element to look like. In Firefox, nothing but the div is resizable.

Is the issue due to the uniqueness of how the canvas element handles CSS width and height?

Answer 1

No, CSS resize is not applicable to inline elements. <canvas>, just like <img> is an inline element. Thus, you cannot use this property on canvases. _{See MDN Note}

Note that you could wrap you canvas inside a resizeable block container and make your canvas to display at 100%, but remember this is just for display. This will stretch the actual pixel content of your canvas image.

const ctx = canvas.getContext('2d');
ctx.arc(25,25,25,0,Math.PI*2);
ctx.fill();

.resize-me {
  display: inline-block;
  border: 1px solid;
  resize: both;
  width: 50px;
  height: 50px;
  overflow: hidden;
}
canvas {
  width: 100%;
  height: 100%;
  pointer-events: none; /* Chrome needs this oO */
}

<div class="resize-me">
  <canvas id="canvas" width="50" height="50"></canvas>
</div>