Conversion to sprites image to- canvas to- png again

index.html:

<!DOCTYPE html>
<html>
<body>
<p>Canvas:</p>
<canvas id=”myCanvas” width=”100″ height=”100″ style=”border:1px solid #d3d3d3;”>
Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var img=document.createElement(‘img’);
img.src=’sprites.png’;
img.onload = function () {
var can=document.getElementById(‘myCanvas’);
var ctx=can.getContext(‘2d’);
ctx.drawImage(img,899,4,85,85,10,10,50,60);
var newimg = new Image();
newimg.src = can.toDataURL(“image/png”);
document.body.appendChild(newimg);
}

</script>

</body>
</html>

Jsfiddle : Clickhere/here

Note: You will get errors if you normally click on index.html. Run this on server with localhost.

Advertisements

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