Resize Canvas Using HTML Slider

The HTML 5 Canvas has to be one of the coolest features that has been introduced in quite some time. Solid and well built, it makes image editing and modification such a breeze compared to the javascript-based tools we had in the past. There are bound to be some useful wrapper libraries out there that make the use of the canvas much easier, but for those looking to write code using the raw framework, there are some things that can be a little more tricky to achieve. One problem I had recently was being able to resize the canvas and the image inside of it. I technically wanted to zoom in and out, but the basic concept but it was essentially a resizing of the canvas.

The canvas library does contain a scale method, but it was not working the way I had wanted. I wanted to give users full control over how to resize the image. This meant, modifying height and width and then sliding the “zoom” button to increase or decrease the size of the image. I was able to achieve this, so I said I would make a post about it for others to hopefully find some use in.

So to start, here are some basic input controls. A box for the height and width and a slider then to zoom.

<p>Slide to scale canvas</p>
<input type="range" id="canvasscale" min="-10" max="20" value="0" onchange="scaleCanvas()"><br>
<p>Rezize canvas using input controls</p>
Height:<input type="text" id="height" onchange="resizeCanvas()"> Width: <input type="text" id="width" onchange="resizeCanvas()">

There are onchange events tied to these inputs. When the height or width is changed, call a function to actually take those values and resize the canvas. The scale function will simply take the value from the slider and perform a calculation to get the new height and width. You can set these however you wish. If the canvas is to be populated with a single image, then you can set these values from the dimensions of this image.

So all you need now is the canvas and the javascript code to resize the HTML canvas when the user modifies the height, width or moves the slider to zoom in or out of the image. The canvas is actually modified with this resizing so if you save it, the resulting image will be the same dimensions as the values in the input boxes.

<hr>
<canvas id="testcanvas" style="background-color:black;display:block"></canvas>

<script>
	originalHeight = 200;
	originalWidth = 400;
	function scaleCanvas()
	{
		var scale = document.getElementById("canvasscale").value;
		
		document.getElementById("height").value = Math.round(((originalHeight * ((scale * 10) / 100)) + originalHeight) * 100) / 100;
		document.getElementById("width").value = Math.round(((originalWidth * ((scale * 10) / 100)) + originalWidth) * 100) / 100;
		resizeCanvas();
	}
	
	function resizeCanvas()
	{
		var canvas = document.getElementById("testcanvas");
		var context = canvas.getContext("2d");	
		
		canvas.height = document.getElementById("height").value;
		canvas.width = document.getElementById("width").value;
	}
</script>

If you are dealing with a canvas that contains one image and you want to ensure that the image remains the same height and width as the canvas as it is modified, then you can use the following line of code to very easily do this. You should call this inside the resizeCanvas function. You will, of course, have to store the selected image as a global variable so as not to lose it when the canvas is modified. You will need something more complex if you are dealing with many different images and shapes on the canvas.

function resizeCanvas()
{
	var canvas = document.getElementById("testcanvas");
	var context = canvas.getContext("2d");	
	
	canvas.height = document.getElementById("height").value;
	canvas.width = document.getElementById("width").value;
	context.drawImage(selectedimage, 0, 0, canvas.width, canvas.height);
}

Related Articles

Related Questions

How to Handle Unexpected 24/7 On-Call Duties?

I just got a new job and was surprised to learn that I'm expected to do 24/7 on-call support for the C-suite for one...

How can I access my old HDD on a new Windows 10 PC?

I built a new PC a couple of years ago, reusing some components from my old Windows 10 machine. Unfortunately, the external drive I...

How Can I Successfully Scrape Amazon Reviews Without Getting Blocked?

Hey folks! I'm having some serious trouble scraping reviews from Amazon using ScraperAPI, but it keeps getting blocked. Does anyone have suggestions on how...

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Latest Tools

Scavenger Hunt Team Randomizer

Planning a scavenger hunt and need to split participants into random teams? Whether you're organizing a school activity, a corporate team-building event, or a...

File Hash Generator Online – Get Instant MD5 and SHA-256 Hashes

Whether you are validating downloads, checking for corruption, or comparing files for duplicates, having a fast and secure way to generate file hashes is...

Visual CSS Editor for Modern Glass UI Effects

Modern UI design is all about clean, layered aesthetics, and few styles deliver this better than glassmorphism. If you're designing sleek user interfaces and...

Fast and Accurate Tap BPM Counter – Free Web Tool

Whether you're producing music, DJing live, or just figuring out the tempo of a song, knowing the BPM (beats per minute) can be critical....

Glassmorphism CSS Generator with Live Preview

Glassmorphism is one of the most visually striking design trends in modern UI. Its soft, frosted-glass effect adds depth and elegance to web interfaces,...

Add Custom Speech and Caption Boxes to Any Image Online

Creating comic-style images used to require complex design tools or specialist software. Whether you're making memes, teaching graphics, social media posts or lighthearted content,...

Latest Posts

Latest Questions