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.<

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>