var theCanvas, canvasContext; var theOuterDimensions, theInnerPixels; var doneTag="

** Done!"; onload = function() { theCanvas = document.getElementById('idCanvas'); canvasContext = theCanvas.getContext("2d"); theOuterDimensions = document.getElementById('idOuterDimensions'); theInnerPixels = document.getElementById('idInnerPixels'); theFontSize = document.getElementById('fontSize'); showOuterDimensions(); showInnerDimensions(); setTimeout(growContainer, 50); } // CSS element control var cvsContainerHeight = 10; var cvsContainerWidth = 10; // HTML element control var cvsInnerPixelsW = 7; var cvsInnerPixelsH = 7; // limits var maxOuterDimension = 200; // To use with viewport sizing, "vh" and "vw", change this to a number like 50 (for 50% viewport, then change lines 67-68 below) var maxInnerDimension = 400; // 2 to 1 var bureyMode = false; function drawShapes(){ canvasContext.beginPath(); canvasContext.moveTo(0,0); canvasContext.lineTo(cvsInnerPixelsW, cvsInnerPixelsH); canvasContext.stroke(); canvasContext.beginPath(); canvasContext.arc(cvsInnerPixelsW/2,cvsInnerPixelsH/2,cvsInnerPixelsW/2,0,2*Math.PI); canvasContext.stroke(); if(bureyMode){ // size over 210-251? and font disappears // once at fixed size, it shrinks as pixel density increases over font's fontSize = Math.min(210, cvsInnerPixelsW); canvasContext.font = Math.min(fontSize, cvsInnerPixelsW) +"px Arial"; canvasContext.fillText("😮",0,cvsInnerPixelsH); theFontSize.innerHTML = "😮 " + fontSize; } } function showOuterDimensions(){ theOuterDimensions.innerHTML = "canvas {
height:" + cvsContainerHeight + "px;
width:" + cvsContainerWidth + "px;
}"; } function showInnerDimensions(){ theInnerPixels.innerHTML = "<canvas
height=" + cvsInnerPixelsH + "
width=" + cvsInnerPixelsW + ">
</canvas>"; } function growContainer(){ cvsContainerHeight += 1; cvsContainerWidth += 1; // CONTROL THE CONTAINER // CSS properties in STYLE control the container theCanvas.style["height"] = cvsContainerHeight + "px"; // use vh for "percentage of viewport height" theCanvas.style["width"] = cvsContainerWidth + "px"; // use vw instead of px, same idea // CONTAINER changes the HTML automatically // So let's FIX it // HTML properties on TAG control inner pixels theCanvas.height = cvsInnerPixelsW; theCanvas.width = cvsInnerPixelsH; drawShapes(); showOuterDimensions(); if(cvsContainerHeight < maxOuterDimension){ setTimeout(growContainer, 1000/30); } else { setTimeout(growPixels, 1000); // wait a second } } var growBy = 0.5; function growPixels(){ // speed up, don't be boring if(cvsInnerPixelsW == 150) growBy = 2.0; cvsInnerPixelsW += growBy; cvsInnerPixelsH += growBy; // HTML properties on TAG control inner pixels // We do NOT have to adjust the CSS container theCanvas.height = cvsInnerPixelsW; theCanvas.width = cvsInnerPixelsH; showInnerDimensions(); drawShapes(); if(cvsInnerPixelsW < maxInnerDimension){ setTimeout(growPixels, 1000/60); } else theInnerPixels.innerHTML += doneTag; }

Canvas: resize "zoom" (CSS vs HTML dimensions)