Add Css Resize Property To Canvas Element

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

Solution 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 */
}

<divclass="resize-me"><canvasid="canvas"width="50"height="50"></canvas></div>