Drawing a Rotated Image to an HTML5 Canvas

The JavaScript code below, when run, prompts the user to specify an image file to be uploaded, and then displays that image, scaled to 100 x 100 pixels and rotated 45 degrees clockwise in the center of an HTML5 canvas.

UPDATE 2017/08/20 – I have fixed an intermittent bug that resulted from the image not always being fully loaded before being drawn to the canvas, which results in a blank canvas.

ImageRotatedOnHTML5Canvas.png


<html>
<body>

<!-- ui -->

<input type="file" onchange="inputFileImageToDraw_Changed(this);" />

<!-- ui ends -->

<script type="text/javascript">

// ui event handlers

function inputFileImageToDraw_Changed(inputFileImageToDraw)
{
	var fileToLoad = inputFileImageToDraw.files[0];
	if (fileToLoad != null)
	{
		if (fileToLoad.type.match("image.*") != null)
		{
			var fileReader = new FileReader();
			fileReader.onload =
				inputFileImageToDraw_Changed_FileLoaded;
			fileReader.readAsDataURL(fileToLoad);
		}
	}
}

function inputFileImageToDraw_Changed_FileLoaded(fileLoadedEvent)
{
	var imageToDraw = document.createElement("img");
	imageToDraw.onload = inputFileImageToDraw_Changed_FileLoaded_ImageLoaded;
	imageToDraw.src = fileLoadedEvent.target.result;
}

function inputFileImageToDraw_Changed_FileLoaded_ImageLoaded(event)
{
	var imageToDraw = event.target;
 
	var display = new Display
	(
		new Coords(200, 200), "Gray", "Black"
	);
	display.initialize();

	display.clear();

	display.drawImageAtPosWithSizeAndRotation
	(
		imageToDraw,
		new Coords(100, 100), // pos
		new Coords(100, 100), // size
		.125 // rotationInCycles
	);

}
// classes

function Coords(x, y)
{
	this.x = x;
	this.y = y;
}

function Display(sizeInPixels, colorFore, colorBack)
{
	this.sizeInPixels = sizeInPixels;
	this.colorFore = colorFore;
	this.colorBack = colorBack;
}
{
	// constants

	Display.RadiansPerCycle = Math.PI * 2;

	// methods

	Display.prototype.clear = function()
	{
		this.graphics.fillStyle = this.colorBack;
		this.graphics.fillRect
		(
			0, 0, this.sizeInPixels.x, this.sizeInPixels.y
		);

		this.graphics.strokeStyle = this.colorFore;
		this.graphics.strokeRect
		(
			0, 0, this.sizeInPixels.x, this.sizeInPixels.y
		);
	}

	Display.prototype.drawImageAtPosWithSizeAndRotation = function
	(
		imageToDraw, pos, size, rotationInCycles
	)
	{
		this.graphics.save();
		this.graphics.translate(pos.x, pos.y);
		var rotationInRadians =
			rotationInCycles * Display.RadiansPerCycle;
		this.graphics.rotate(rotationInRadians);
		this.graphics.drawImage
		(
			imageToDraw,
			0 - size.x / 2, 0 - size.y / 2, // pos
			size.x, size.y // size
		);
		this.graphics.restore();
	}

	Display.prototype.initialize = function()
	{
		this.canvas = document.createElement("canvas");
		this.canvas.width = this.sizeInPixels.x;
		this.canvas.height = this.sizeInPixels.y;
		document.body.appendChild(this.canvas);

		this.graphics = this.canvas.getContext("2d");
	}
}

</script>

</body>
</html>

Advertisements
This entry was posted in Uncategorized and tagged , , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s