Can we scale a section in a page to zoom the entire content?

Question

The scale method working with canvas

Answer 1

Unless a canvas element covers the entire viewport, no you can't use a scale transform from HTML5 canvas's 2d context to scale all content on the page.

The body element contains all the visible content in the page, though.

You could do something like this in JavaScript to scale everything up by a factor of 2:
document.querySelector('body').style.transform = 'scale(2, 2)';

You could do similar with CSS:
body {
transform: scale(2, 2);
}

Set the number to whatever zoom/scale you want.

If you want a smaller element on the page scaled, you can set the same transform CSS property on that element instead of the body.

I can't think of a time I'd ever want to do this to a site I'm making but it is a fun trick. The only time I transformed an object was to hack a Google Recaptcha to a more aesthetically pleasing size. Since zoom is a feature of the web browser, it is generally best to let the browser control it instead of reinventing it in your website.

Here is another funny trick with a different transform value. Run this in your browser's JavaScript console while visiting any site so you can feel dizzy:
document.querySelector('body').style.transform = 'rotate(3deg)';

Running this will make you more dizzy:
var t = 0;
setInterval(function() {
t+=2;
document.querySelector('body').style.transform = 'rotate(' + (t % 360) + 'deg)';
}, 50);