Skip to content

Instantly share code, notes, and snippets.

@ynonp

ynonp/index.html

Created September 23, 2012 12:54
Show Gist options
  • Save ynonp/3770619 to your computer and use it in GitHub Desktop.
Save ynonp/3770619 to your computer and use it in GitHub Desktop.
Download ZIP
canvas example
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Canvas Example</title>
<style>
canvas {
border:5px solid purple;
}
</style>
</head>
<body>
<canvas width="300" height="300">
Your browser does not support canvas
Go upgrade...
</canvas>
<img />
<img />
<img />
<script src="paint.js"></script>
</body>
</html>
Raw
paint.js
/**
* Created with JetBrains WebStorm.
* User: ynonperek
* Date: 9/23/12
* Time: 2:33 PM
* To change this template use File | Settings | File Templates.
*/
var can = document.querySelector('canvas');
var ctx = can.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 50, 50);
ctx.fillStyle = 'hsla(135, 62%, 50%, 0.57)';
ctx.fillRect(100, 10, 50, 50);
ctx.fillStyle = 'black';
ctx.fillText('Hello Canvas', 50, 100);
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(200, 100);
ctx.lineTo(200, 200);
ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI * 2);
ctx.fill();
var images = document.querySelectorAll('img');
var url = can.toDataURL();
for ( var i=0; i < images.length; i++ ) {
images[i].setAttribute('src', url);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment