Cube - Page - Concave - Zoom - Linear - Fade - None - Default
Default -
Sky -
Beige -
Simple -
Serif -
Night
Moon -
Solarized
<!DOCTYPE HTML><html>
<head>
<style>
body {margin: 0px;
padding: 0px;
text-align: center;
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="canvas-element" width="480" height="360"></canvas>
<script>
var canvas = document.getElementById('canvas-element');
var context = canvas.getContext('2d');
// do cool things with the contextcontext.font = '40pt Consolas';
context.fillStyle = 'blue';
context.fillText('Hello World!', 100, 160);
</script>
</body>
</html>
x<!DOCTYPE HTML><html>
<head>
<style>
body {margin: 0px;
padding: 0px;
text-align: center;
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="canvas-element" width="480" height="360"></canvas>
<script>
var canvas = document.getElementById('canvas-element');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(100, 150);
context.lineTo(450, 50);
context.stroke();
</script>
</body>
</html>
x<!DOCTYPE HTML><html>
<head>
<style>
body {margin: 0px;
padding: 0px;
text-align: center;
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="canvas-element" width="480" height="360"></canvas>
<script>
var canvas = document.getElementById('canvas-element');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(100, 150);
context.lineTo(450, 50);
context.lineWidth = 15;
context.stroke();
</script>
</body>
</html>
x<!DOCTYPE HTML><html>
<head>
<style>
body {margin: 0px;
padding: 0px;
text-align: center;
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="canvas-element" width="480" height="360"></canvas>
<script>
var canvas = document.getElementById('canvas-element');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(100, 150);
context.lineTo(450, 50);
context.lineWidth = 10;
// set line colorcontext.strokeStyle = '#ff0000';
context.stroke();
</script>
</body>
</html>
x<!DOCTYPE HTML><html>
<head>
<style>
body {margin: 0px;
padding: 0px;
text-align: center;
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="canvas-element" width="480" height="360"></canvas>
<script>
var canvas = document.getElementById('canvas-element');
var context = canvas.getContext('2d');
// butt line cap (top line)context.beginPath();
context.moveTo(100, canvas.height / 2 - 50);
context.lineTo(canvas.width - 100, canvas.height / 2 - 50);
context.lineWidth = 20;
context.strokeStyle = '#0000ff';
context.lineCap = 'butt';
context.stroke();
// round line cap (middle line)context.beginPath();
context.moveTo(100, canvas.height / 2);
context.lineTo(canvas.width - 100, canvas.height / 2);
context.lineWidth = 20;
context.strokeStyle = '#0000ff';
context.lineCap = 'round';
context.stroke();
// square line cap (bottom line)context.beginPath();
context.moveTo(100, canvas.height / 2 + 50);
context.lineTo(canvas.width - 100, canvas.height / 2 + 50);
context.lineWidth = 20;
context.strokeStyle = '#0000ff';
context.lineCap = 'square';
context.stroke();
</script>
</body>
</html>
x<!DOCTYPE HTML><html>
<head>
<style>
body {margin: 0px;
padding: 0px;
text-align: center;
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="canvas-element" width="480" height="360"></canvas>
<script>
var canvas = document.getElementById('canvas-element');
var context = canvas.getContext('2d');
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = 75;
var startAngle = 1.1 * Math.PI;
var endAngle = 1.9 * Math.PI;
var counterClockwise = false;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 15;
// line colorcontext.strokeStyle = 'black';
context.stroke();
</script>
</body>
</html>
x<!DOCTYPE HTML><html>
<head>
<style>
body {margin: 0px;
padding: 0px;
text-align: center;
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="canvas-element" width="480" height="360"></canvas>
<script>
var canvas = document.getElementById('canvas-element');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(188, 150);
context.quadraticCurveTo(288, 0, 388, 150);
context.lineWidth = 10;
// line colorcontext.strokeStyle = 'black';
context.stroke();
</script>
</body>
</html>
x<!DOCTYPE HTML><html>
<head>
<style>
body {margin: 0px;
padding: 0px;
text-align: center;
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="canvas-element" width="480" height="360"></canvas>
<script>
var canvas = document.getElementById('canvas-element');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(188, 130);
context.bezierCurveTo(140, 10, 388, 10, 388, 170);
context.lineWidth = 10;
// line colorcontext.strokeStyle = 'black';
context.stroke();
</script>
</body>
</html>
x<!DOCTYPE HTML><html>
<head>
<style>
body {margin: 0px;
padding: 0px;
text-align: center;
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="canvas-element" width="480" height="360"></canvas>
<script>
var canvas = document.getElementById('canvas-element');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(100, 20);
// line 1context.lineTo(200, 160);
// quadratic curvecontext.quadraticCurveTo(230, 200, 250, 120);
// bezier curvecontext.bezierCurveTo(290, -40, 300, 200, 400, 150);
// line 2context.lineTo(500, 90);
context.lineWidth = 5;
context.strokeStyle = 'blue';
context.stroke();
</script>
</body>
</html>
x<!DOCTYPE HTML><html>
<head>
<style>
body {margin: 0px;
padding: 0px;
text-align: center;
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="canvas-element" width="480" height="360"></canvas>
<script>
var canvas = document.getElementById('canvas-element');
var context = canvas.getContext('2d');
// set line width for all linescontext.lineWidth = 25;
// miter line join (left)context.beginPath();
context.moveTo(49, 150);
context.lineTo(99, 50);
context.lineTo(149, 150);
context.lineJoin = 'miter';
context.stroke();
// round line join (middle)context.beginPath();
context.moveTo(189, 150);
context.lineTo(239, 50);
context.lineTo(289, 150);
context.lineJoin = 'round';
context.stroke();
// bevel line join (right)context.beginPath();
context.moveTo(329, 150);
context.lineTo(379, 50);
context.lineTo(429, 150);
context.lineJoin = 'bevel';
context.stroke();
</script>
</body>
</html>
x<!DOCTYPE HTML><html>
<head>
<style>
body {margin: 0px;
padding: 0px;
text-align: center;
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="canvas-element" width="480" height="360"></canvas>
<script>
var canvas = document.getElementById('canvas-element');
var context = canvas.getContext('2d');
var rectWidth = 200;
var rectHeight = 100;
var rectX = 189;
var rectY = 50;
var cornerRadius = 50;
context.beginPath();
context.moveTo(rectX, rectY);
context.lineTo(rectX + rectWidth - cornerRadius, rectY);
context.arcTo(rectX + rectWidth, rectY, rectX + rectWidth, rectY + cornerRadius, cornerRadius);
context.lineTo(rectX + rectWidth, rectY + rectHeight);
context.lineWidth = 5;
context.stroke();
</script>
</body>
</html>
x<!DOCTYPE HTML><html>
<head>
<style>
body {margin: 0px;
padding: 0px;
text-align: center;
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="canvas-element" width="480" height="360"></canvas>
<script>
var canvas = document.getElementById('canvas-element');
var context = canvas.getContext('2d');
// begin custom shapecontext.beginPath();
context.moveTo(170, 80);
context.bezierCurveTo(130, 100, 130, 150, 230, 150);
context.bezierCurveTo(250, 180, 320, 180, 340, 150);
context.bezierCurveTo(420, 150, 420, 120, 390, 100);
context.bezierCurveTo(430, 40, 370, 30, 340, 50);
context.bezierCurveTo(320, 5, 250, 20, 250, 50);
context.bezierCurveTo(200, 5, 150, 20, 170, 80);
// complete custom shapecontext.closePath();
context.lineWidth = 5;
context.strokeStyle = 'blue';
context.stroke();
</script>
</body>
</html>
x<!DOCTYPE HTML><html>
<head>
<style>
body {margin: 0px;
padding: 0px;
text-align: center;
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="canvas-element" width="480" height="360"></canvas>
<script>
var canvas = document.getElementById('canvas-element');
var context = canvas.getContext('2d');
context.beginPath();
context.rect(188, 50, 200, 100);
context.fillStyle = 'yellow';
context.fill();
context.lineWidth = 7;
context.strokeStyle = 'black';
context.stroke();
</script>
</body>
</html>
x<!DOCTYPE HTML><html>
<head>
<style>
body {margin: 0px;
padding: 0px;
text-align: center;
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="canvas-element" width="480" height="360"></canvas>
<script>
var canvas = document.getElementById('canvas-element');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 70;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'green';
context.fill();
context.lineWidth = 5;
context.strokeStyle = '#003300';
context.stroke();
</script>
</body>
</html>
x<!DOCTYPE HTML><html>
<head>
<style>
body {margin: 0px;
padding: 0px;
text-align: center;
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="canvas-element" width="480" height="360"></canvas>
<script>
var canvas = document.getElementById('canvas-element');
var context = canvas.getContext('2d');
context.beginPath();
context.arc(288, 75, 70, 0, Math.PI, false);
context.closePath();
context.lineWidth = 5;
context.fillStyle = 'red';
context.fill();
context.strokeStyle = '#550000';
context.stroke();
</script>
</body>
</html>
x<!DOCTYPE HTML><html>
<head>
<style>
body {margin: 0px;
padding: 0px;
text-align: center;
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="canvas-element" width="480" height="360"></canvas>
<script>
var canvas = document.getElementById('canvas-element');
var context = canvas.getContext('2d');
// begin custom shapecontext.beginPath();
context.moveTo(170, 80);
context.bezierCurveTo(130, 100, 130, 150, 230, 150);
context.bezierCurveTo(250, 180, 320, 180, 340, 150);
context.bezierCurveTo(420, 150, 420, 120, 390, 100);
context.bezierCurveTo(430, 40, 370, 30, 340, 50);
context.bezierCurveTo(320, 5, 250, 20, 250, 50);
context.bezierCurveTo(200, 5, 150, 20, 170, 80);
// complete custom shapecontext.closePath();
context.lineWidth = 5;
context.fillStyle = '#8ED6FF';
context.fill();
context.strokeStyle = 'blue';
context.stroke();
</script>
</body>
</html>
x<!DOCTYPE HTML><html>
<head>
<style>
body {margin: 0px;
padding: 0px;
text-align: center;
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="canvas-element" width="480" height="360"></canvas>
<script>
var canvas = document.getElementById('canvas-element');
var context = canvas.getContext('2d');
context.rect(0, 0, canvas.width, canvas.height);
// add linear gradientvar grd = context.createLinearGradient(0, 0, canvas.width, canvas.height);
// light bluegrd.addColorStop(0, '#8ED6FF');
// dark bluegrd.addColorStop(1, '#004CB3');
context.fillStyle = grd;
context.fill();
</script>
</body>
</html>
x<!DOCTYPE HTML><html>
<head>
<style>
body {margin: 0px;
padding: 0px;
text-align: center;
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="canvas-element" width="480" height="360"></canvas>
<script>
var canvas = document.getElementById('canvas-element');
var context = canvas.getContext('2d');
context.rect(0, 0, canvas.width, canvas.height);
// create radial gradientvar grd = context.createRadialGradient(240, 180, 10, 240, 50, 300);
// light bluegrd.addColorStop(0, '#8ED6FF');
// dark bluegrd.addColorStop(1, '#004CB3');
context.fillStyle = grd;
context.fill();
</script>
</body>
</html>
x<!DOCTYPE HTML><html>
<head>
<style>
body {margin: 0px;
padding: 0px;
text-align: center;
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="canvas-element" width="480" height="360"></canvas>
<script>
var canvas = document.getElementById('canvas-element');
var context = canvas.getContext('2d');
var imageObj = new Image();
imageObj.onload = function() {
var pattern = context.createPattern(imageObj, 'repeat');
context.rect(0, 0, canvas.width, canvas.height);
context.fillStyle = pattern;
context.fill();
};
imageObj.src = 'assets/wood-pattern.png';
</script>
</body>
</html>
x<!DOCTYPE HTML><html>
<head>
<style>
body {margin: 0px;
padding: 0px;
text-align: center;
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="canvas-element" width="480" height="360"></canvas>
<script>
var canvas = document.getElementById('canvas-element');
var context = canvas.getContext('2d');
var imageObj = new Image();
imageObj.onload = function() {
context.drawImage(imageObj, 20, 40);
};
imageObj.src = 'assets/maldives.jpg';
</script>
</body>
</html>
x<!DOCTYPE HTML><html>
<head>
<style>
body {margin: 0px;
padding: 0px;
text-align: center;
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="canvas-element" width="480" height="360"></canvas>
<script>
var canvas = document.getElementById('canvas-element');
var context = canvas.getContext('2d');
var x = 40;
var y = 60;
var width = 200;
var height = 100;
var imageObj = new Image();
imageObj.onload = function() {
context.drawImage(imageObj, x, y, width, height);
};
imageObj.src = 'assets/maldives.jpg';
</script>
</body>
</html>
x<!DOCTYPE HTML><html>
<head>
<style>
body {margin: 0px;
padding: 0px;
text-align: center;
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="canvas-element" width="480" height="360"></canvas>
<script>
var canvas = document.getElementById('canvas-element');
var context = canvas.getContext('2d');
var imageObj = new Image();
imageObj.onload = function() {
// draw cropped imagevar sourceX = 160;
var sourceY = 0;
var sourceWidth = 150;
var sourceHeight = 300;
var destWidth = sourceWidth;
var destHeight = sourceHeight;
var destX = canvas.width / 2 - destWidth / 2;
var destY = canvas.height / 2 - destHeight / 2;
context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
};
imageObj.src = 'assets/maldives.jpg';
</script>
</body>
</html>
x<!DOCTYPE HTML><html>
<head>
<style>
body {margin: 0px;
padding: 0px;
text-align: center;
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="canvas-element" width="480" height="360"></canvas>
<script>
function loadImages(sources, callback) {
var images = {};
var loadedImages = 0;
var numImages = 0;
// get num of sourcesfor(var src in sources) {
numImages++;
}
for(var src in sources) {
images[src] = new Image();
images[src].onload = function() {
if(++loadedImages >= numImages) {
callback(images);
}
};
images[src].src = sources[src];
}
}
var canvas = document.getElementById('canvas-element');
var context = canvas.getContext('2d');
var sources = {
maldives: 'assets/maldives.jpg',
jzg: 'assets/jzg.jpg'
};
loadImages(sources, function(images) {
context.drawImage(images.maldives, 10, 20, 224, 149);
context.drawImage(images.jzg, 100, 160, 224, 125);
});
</script>
</body>
</html>
x<!DOCTYPE HTML><html>
<head>
<style>
body {margin: 0px;
padding: 0px;
text-align: center;
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="canvas-element" width="480" height="360"></canvas>
<script>
var canvas = document.getElementById('canvas-element');
var context = canvas.getContext('2d');
context.font = 'italic 40pt Consolas';
context.fillText('HTML5 Canvas!', 100, 150);
</script>
</body>
</html>
x<!DOCTYPE HTML><html>
<head>
<style>
body {margin: 0px;
padding: 0px;
text-align: center;
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="canvas-element" width="480" height="360"></canvas>
<script>
var canvas = document.getElementById('canvas-element');
var context = canvas.getContext('2d');
context.font = '40pt Verdana';
context.fillStyle = 'hsla(240, 90%, 60%, 0.8)';
context.fillText('HTML5 Canvas!', 100, 150);
</script>
</body>
</html>
x<!DOCTYPE HTML><html>
<head>
<style>
body {margin: 0px;
padding: 0px;
text-align: center;
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="canvas-element" width="480" height="360"></canvas>
<script>
var canvas = document.getElementById('canvas-element');
var context = canvas.getContext('2d');
var x = 0;
var y = 120;
context.font = '50pt Verdana';
context.lineWidth = 2;
// stroke colorcontext.strokeStyle = 'hsla(240, 80%, 40%, 0.6)';
context.strokeText('HTML5 Canvas!', x, y);
</script>
</body>
</html>
x<!DOCTYPE HTML><html>
<head>
<style>
body {margin: 0px;
padding: 0px;
text-align: center;
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="canvas-element" width="480" height="360"></canvas>
<script>
var canvas = document.getElementById('canvas-element');
var context = canvas.getContext('2d');
var x = canvas.width / 2;
var y = canvas.height / 2;
context.font = '40pt Consolas';
context.textAlign = 'center';
context.fillStyle = 'hsla(240, 80%, 40%, 0.6)';
context.fillText('HTML5 Canvas!', x, y);
</script>
</body>
</html>
x<!DOCTYPE HTML><html>
<head>
<style>
body {margin: 0px;
padding: 0px;
text-align: center;
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="canvas-element" width="480" height="360"></canvas>
<script>
var canvas = document.getElementById('canvas-element');
var context = canvas.getContext('2d');
var x = canvas.width / 2;
var y = canvas.height / 2;
context.font = '40pt Consolas';
// textAlign aligns text horizontally relative to placementcontext.textAlign = 'center';
// textBaseline aligns text vertically relative to font stylecontext.textBaseline = 'middle';
context.fillStyle = 'hsla(240, 80%, 40%, 0.6)';
context.fillText('HTML5 Canvas!', x, y);
</script>
</body>
</html>
x<!DOCTYPE HTML><html>
<head>
<style>
body {margin: 0px;
padding: 0px;
text-align: center;
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="canvas-element" width="480" height="360"></canvas>
<script>
var canvas = document.getElementById('canvas-element');
var context = canvas.getContext('2d');
var x = canvas.width / 2;
var y = canvas.height / 2 - 10;
var text = 'HTML5 Canvas!';
context.font = '40pt Consolas';
context.textAlign = 'center';
context.fillStyle = 'hsla(240, 80%, 40%, 0.8)';
context.fillText(text, x, y);
// get text metricsvar metrics = context.measureText(text);
var width = metrics.width;
context.font = '20pt Verdana';
context.textAlign = 'center';
context.fillStyle = 'hsla(240, 80%, 40%, 0.4)';
context.fillText('(' + width + 'px wide)', x, y + 50);
</script>
</body>
</html>
x<!DOCTYPE HTML><html>
<head>
<style>
body {margin: 0px;
padding: 0px;
text-align: center;
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="canvas-element" width="480" height="360"></canvas>
<script>
function wrapText(context, text, x, y, maxWidth, lineHeight) {
var words = text.split(' ');
var line = '';
for(var n = 0; n < words.length; n++) {
var testLine = line + words[n] + ' ';
var metrics = context.measureText(testLine);
var testWidth = metrics.width;
if (testWidth > maxWidth && n > 0) {
context.fillText(line, x, y);
line = words[n] + ' ';
y += lineHeight;
}
else {line = testLine;
}
}
context.fillText(line, x, y);
}
var canvas = document.getElementById('canvas-element');
var context = canvas.getContext('2d');
var maxWidth = 400;
var lineHeight = 24;
var x = (canvas.width - maxWidth) / 2;
var y = 40;
var text = 'The HTML5 <canvas> element is used to draw graphics, on the fly, via scripting (usually JavaScript). The <canvas> element is only a container for graphics. You must use a script to actually draw the graphics. Canvas has several methods for drawing paths, boxes, circles, text, and adding images. \nHTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。';
context.font = '16pt Consolas';
context.fillStyle = 'hsla(240, 80%, 40%, 0.6)';
wrapText(context, text, x, y, maxWidth, lineHeight);
</script>
</body>
</html>
x<!DOCTYPE HTML><html>
<head>
<style>
body {margin: 0px;
padding: 0px;
text-align: center;
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="canvas-element" width="480" height="360"></canvas>
<script>
var canvas = document.getElementById('canvas-element');
var context = canvas.getContext('2d');
var rectWidth = 150;
var rectHeight = 75;
// translate context to center of canvascontext.translate(canvas.width / 2, canvas.height / 2);
context.fillStyle = 'hsla(240, 90%, 60%, 0.8)';
context.fillRect(rectWidth / -2, rectHeight / -2, rectWidth, rectHeight);
</script>
</body>
</html>
x<!DOCTYPE HTML><html>
<head>
<style>
body {margin: 0px;
padding: 0px;
text-align: center;
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="canvas-element" width="480" height="360"></canvas>
<script>
var canvas = document.getElementById('canvas-element');
var context = canvas.getContext('2d');
var rectWidth = 150;
var rectHeight = 75;
// translate context to center of canvascontext.translate(canvas.width / 2, canvas.height / 2);
// scale y componentcontext.scale(1, 0.5);
context.fillStyle = 'hsla(240, 90%, 60%, 0.8)';
context.fillRect(rectWidth / -2, rectHeight / -2, rectWidth, rectHeight);
</script>
</body>
</html>
x<!DOCTYPE HTML><html>
<head>
<style>
body {margin: 0px;
padding: 0px;
text-align: center;
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="canvas-element" width="480" height="360"></canvas>
<script>
var canvas = document.getElementById('canvas-element');
var context = canvas.getContext('2d');
var rectWidth = 150;
var rectHeight = 75;
// translate context to center of canvascontext.translate(canvas.width / 2, canvas.height / 2);
// rotate 45 degrees clockwisecontext.rotate(Math.PI / 4);
context.fillStyle = 'blue';
context.fillRect(rectWidth / -2, rectHeight / -2, rectWidth, rectHeight);
</script>
</body>
</html>
x<!DOCTYPE HTML><html>
<head>
<style>
body {margin: 0px;
padding: 0px;
text-align: center;
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="canvas-element" width="480" height="360"></canvas>
<script>
var canvas = document.getElementById('canvas-element');
var context = canvas.getContext('2d');
var rectWidth = 150;
var rectHeight = 75;
// translation matrix: // 1 0 tx // 0 1 ty // 0 0 1var tx = canvas.width / 2;
var ty = canvas.height / 2;
// apply custom transformcontext.transform(1, 0, 0, 1, tx, ty);
context.fillStyle = 'blue';
context.fillRect(rectWidth / -2, rectHeight / -2, rectWidth, rectHeight);
</script>
</body>
</html>
x<!DOCTYPE HTML><html>
<head>
<style>
body {margin: 0px;
padding: 0px;
text-align: center;
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="canvas-element" width="480" height="360"></canvas>
<script>
var canvas = document.getElementById('canvas-element');
var context = canvas.getContext('2d');
var rectWidth = 150;
var rectHeight = 75;
// shear matrix: // 1 sx 0 // sy 1 0 // 0 0 1var sx = 0.75;
// .75 horizontal shearvar sy = 0;
// no vertical shear // translate context to center of canvascontext.translate(canvas.width / 2, canvas.height / 2);
// apply custom transformcontext.transform(1, sy, sx, 1, 0, 0);
context.fillStyle = 'blue';
context.fillRect(-rectWidth / 2, rectHeight / -2, rectWidth, rectHeight);
</script>
</body>
</html>
x<!DOCTYPE HTML><html>
<head>
<style>
body {margin: 0px;
padding: 0px;
text-align: center;
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="canvas-element" width="480" height="360"></canvas>
<script>
var canvas = document.getElementById('canvas-element');
var context = canvas.getContext('2d');
// translate context to center of canvascontext.translate(canvas.width / 2, canvas.height / 2);
// flip context horizontallycontext.scale(-1, 1);
context.font = '30pt Calibri';
context.textAlign = 'center';
context.fillStyle = 'blue';
context.fillText('Hello World!', 0, 0);
</script>
</body>
</html>
x<!DOCTYPE HTML><html>
<head>
<style>
body {margin: 0px;
padding: 0px;
text-align: center;
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="canvas-element" width="480" height="360"></canvas>
<script>
var canvas = document.getElementById('canvas-element');
var context = canvas.getContext('2d');
var rectWidth = 150;
var rectHeight = 75;
// translate context to center of canvascontext.translate(canvas.width / 2, canvas.height / 2);
context.fillStyle = 'blue';
context.fillRect(-rectWidth / 2, rectHeight / -2, rectWidth, rectHeight);
// Reset Transform // 1 0 0 // 0 1 0 // 0 0 1 // apply custom transformcontext.setTransform(1, 0, 0, 1, 0, 0);
context.fillStyle = 'red';
context.fillRect(0, 0, rectWidth, rectHeight);
</script>
</body>
</html>
x<!DOCTYPE HTML><html>
<head>
<style>
body {margin: 0px;
padding: 0px;
text-align: center;
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="canvas-element" width="480" height="360"></canvas>
<script>
var canvas = document.getElementById('canvas-element');
var context = canvas.getContext('2d');
var rectWidth = 150;
var rectHeight = 75;
context.save();
// save state 1context.translate(canvas.width / 2, canvas.height / 2);
context.save();
// save state 2context.rotate(Math.PI / 4);
context.save();
// save state 3context.scale(2, 2);
context.fillStyle = 'blue';
context.fillRect(rectWidth / -2, rectHeight / -2, rectWidth, rectHeight);
context.restore();
// restore state 3context.fillStyle = 'red';
context.fillRect(rectWidth / -2, rectHeight / -2, rectWidth, rectHeight);
context.restore();
// restore state 2context.fillStyle = 'yellow';
context.fillRect(rectWidth / -2, rectHeight / -2, rectWidth, rectHeight);
context.restore();
// restore state 1context.fillStyle = 'green';
context.fillRect(rectWidth / -2, rectHeight / -2, rectWidth, rectHeight);
</script>
</body>
</html>
x<!DOCTYPE HTML><html>
<head>
<style>
body {margin: 0px;
padding: 0px;
text-align: center;
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="canvas-element" width="480" height="360"></canvas>
<script>
var canvas = document.getElementById('canvas-element');
var context = canvas.getContext('2d');
var centerX = 0;
var centerY = 0;
var radius = 50;
// save statecontext.save();
// translate contextcontext.translate(canvas.width / 2, canvas.height / 2);
// scale context horizontallycontext.scale(2, 1);
// draw circle which will be stretched into an ovalcontext.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// restore to original statecontext.restore();
// apply stylingcontext.fillStyle = '#8ED6FF';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'black';
context.stroke();
</script>
</body>
</html>
x<!DOCTYPE HTML><html>
<head>
<style>
body {margin: 0px;
padding: 0px;
text-align: center;
overflow: hidden;
background-color: white;
}
</style>
</head>
<body>
<canvas id="canvas-element" width="480" height="360"></canvas>
<script>
var canvas = document.getElementById('canvas-element');
var context = canvas.getContext('2d');
context.rect(188, 40, 200, 100);
context.fillStyle = 'red';
context.shadowColor = '#999';
context.shadowBlur = 20;
context.shadowOffsetX = 15;
context.shadowOffsetY = 15;
context.fill();
</script>
</body>
</html>
x<!DOCTYPE HTML><html>
<head>
<style>
body {margin: 0px;
padding: 0px;
text-align: center;
overflow: hidden;
background-color: white;
}
</style>
</head>
<body>
<canvas id="canvas-element" width="480" height="360"></canvas>
<script>
var canvas = document.getElementById('canvas-element');
var context = canvas.getContext('2d');
// draw blue rectanglecontext.beginPath();
context.rect(200, 20, 100, 100);
context.fillStyle = 'blue';
context.fill();
// draw transparent red circlecontext.globalAlpha = 0.5;
context.beginPath();
context.arc(320, 120, 60, 0, 2 * Math.PI, false);
context.fillStyle = 'red';
context.fill();
</script>
</body>
</html>
x<!DOCTYPE HTML><html>
<head>
<style>
body {margin: 0px;
padding: 0px;
text-align: center;
overflow: hidden;
background-color: white;
}
</style>
</head>
<body>
<canvas id="canvas-element" width="480" height="360"></canvas>
<script>
var canvas = document.getElementById('canvas-element');
var context = canvas.getContext('2d');
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = 75;
var offset = 50;
/* * save() allows us to save the canvas context before * defining the clipping region so that we can return * to the default state later on */context.save();
context.beginPath();
context.arc(x, y, radius, 0, 2 * Math.PI, false);
context.clip();
// draw blue circle inside clipping regioncontext.beginPath();
context.arc(x - offset, y - offset, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'blue';
context.fill();
// draw yellow circle inside clipping regioncontext.beginPath();
context.arc(x + offset, y, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'yellow';
context.fill();
// draw red circle inside clipping regioncontext.beginPath();
context.arc(x, y + offset, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'red';
context.fill();
/* * restore() restores the canvas context to its original state * before we defined the clipping region */context.restore();
context.beginPath();
context.arc(x, y, radius, 0, 2 * Math.PI, false);
context.lineWidth = 10;
context.strokeStyle = 'blue';
context.stroke();
</script>
</body>
</html>
x<!DOCTYPE HTML><html>
<head>
<style>
body {margin: 0px;
padding: 0px;
text-align: center;
overflow: hidden;
background-color: white;
}
</style>
</head>
<body>
<canvas id="canvas-element" width="480" height="400"></canvas>
<canvas id="temp-canvas-element" width="480" height="400" style="display:none;"></canvas>
<script>
var canvas = document.getElementById('canvas-element');
var context = canvas.getContext('2d');
var tempCanvas = document.getElementById('temp-canvas-element');
var tempContext = tempCanvas.getContext('2d');
var squareWidth = 50;
var circleRadius = 30;
var shapeOffset = 50;
var operationOffset = 120;
var arr = [];
arr.push('source-atop');
arr.push('source-in');
arr.push('source-out');
arr.push('source-over');
arr.push('destination-atop');
arr.push('destination-in');
arr.push('destination-out');
arr.push('destination-over');
arr.push('lighter');
arr.push('darker');
arr.push('xor');
arr.push('copy');
// translate context to add 10px paddingcontext.translate(10, 10);
// draw each of the operationsfor(var n = 0; n < arr.length; n++) {
var thisOperation = arr[n];
tempContext.save();
// clear temp contexttempContext.clearRect(0, 0, canvas.width, canvas.height);
// draw rectangle (destination)tempContext.beginPath();
tempContext.rect(0, 0, squareWidth, squareWidth);
tempContext.fillStyle = 'hsl(240, 90%, 60%)';
tempContext.fill();
// set global compositetempContext.globalCompositeOperation = thisOperation;
// draw circle (source)tempContext.beginPath();
tempContext.arc(shapeOffset, shapeOffset, circleRadius, 0, 2 * Math.PI, false);
tempContext.fillStyle = 'hsl(0, 90%, 60%)';
tempContext.fill();
tempContext.restore();
// draw texttempContext.font = '10pt Verdana';
tempContext.fillStyle = 'black';
tempContext.fillText(thisOperation, 0, squareWidth + 45);
// translate visible context so operation is drawn in the right placeif(n > 0) {
if(n % 4 === 0) {
context.translate(operationOffset * -3, operationOffset);
}
else {context.translate(operationOffset, 0);
}
}
// copy drawing from tempCanvas onto visible canvascontext.drawImage(tempCanvas, 0, 0);
}
</script>
</body>
</html>
x<!DOCTYPE HTML><html>
<head>
<style>
body {margin: 0px;
padding: 0px;
}
#buttons {position: absolute;
top: 5px;
left: 10px;
}
#buttons > input {
padding: 10px;
display: block;
margin-top: 5px;
}
</style>
</head>
<body>
<canvas id="canvas-element" width="480" height="360"></canvas>
<div id="buttons">
<input type="button" id="clear" value="Clear">
</div>
<script>
var canvas = document.getElementById('canvas-element');
var context = canvas.getContext('2d');
// begin custom shapecontext.beginPath();
context.moveTo(170, 80);
context.bezierCurveTo(130, 100, 130, 150, 230, 150);
context.bezierCurveTo(250, 180, 320, 180, 340, 150);
context.bezierCurveTo(420, 150, 420, 120, 390, 100);
context.bezierCurveTo(430, 40, 370, 30, 340, 50);
context.bezierCurveTo(320, 5, 250, 20, 250, 50);
context.bezierCurveTo(200, 5, 150, 20, 170, 80);
// complete custom shapecontext.closePath();
context.lineWidth = 5;
context.strokeStyle = 'blue';
context.stroke();
// bind event handler to clear buttondocument.getElementById('clear').addEventListener('click', function() {
context.clearRect(0, 0, canvas.width, canvas.height);
}, false);</script>
</body>
</html>
x<!DOCTYPE HTML><html>
<head>
<style>
body {margin: 0px;
padding: 0px;
text-align: center;
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="canvas-element" width="480" height="360"></canvas>
<script>
window.requestAnimFrame = (function(callback) {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
function drawRectangle(myRectangle, context) {
context.beginPath();
context.rect(myRectangle.x, myRectangle.y, myRectangle.width, myRectangle.height);
context.fillStyle = '#8ED6FF';
context.fill();
context.lineWidth = myRectangle.borderWidth;
context.strokeStyle = 'black';
context.stroke();
}
function animate(myRectangle, canvas, context, startTime) {
// updatevar time = (new Date()).getTime() - startTime;
var linearSpeed = 100;
// pixels / secondvar newX = linearSpeed * time / 1000;
if(newX < canvas.width - myRectangle.width - myRectangle.borderWidth / 2) {
myRectangle.x = newX;
}
// clearcontext.clearRect(0, 0, canvas.width, canvas.height);
drawRectangle(myRectangle, context);
// request new framerequestAnimFrame(function() {
animate(myRectangle, canvas, context, startTime);
});
}
var canvas = document.getElementById('canvas-element');
var context = canvas.getContext('2d');
var myRectangle = {
x: 0,
y: 75,
width: 100,
height: 50,
borderWidth: 5
};
drawRectangle(myRectangle, context);
// wait one second before starting animationsetTimeout(function() {
var startTime = (new Date()).getTime();
animate(myRectangle, canvas, context, startTime);
}, 1000);</script>
</body>
</html>
x<!DOCTYPE HTML><html>
<head>
<style>
body {margin: 0px;
padding: 0px;
text-align: center;
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="canvas-element" width="480" height="360"></canvas>
<script>
window.requestAnimFrame = (function(callback) {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
function drawRectangle(myRectangle, context) {
context.beginPath();
context.rect(myRectangle.x, myRectangle.y, myRectangle.width, myRectangle.height);
context.fillStyle = '#8ED6FF';
context.fill();
context.lineWidth = myRectangle.borderWidth;
context.strokeStyle = 'black';
context.stroke();
}
function animate(myRectangle, canvas, context, startTime) {
// updatevar time = (new Date()).getTime() - startTime;
var linearSpeed = 100;
// pixels / secondvar newX = linearSpeed * time / 1000;
if(newX < canvas.width - myRectangle.width - myRectangle.borderWidth / 2) {
myRectangle.x = newX;
}
// clearcontext.clearRect(0, 0, canvas.width, canvas.height);
drawRectangle(myRectangle, context);
// request new framerequestAnimFrame(function() {
animate(myRectangle, canvas, context, startTime);
});
}
var canvas = document.getElementById('canvas-element');
var context = canvas.getContext('2d');
var myRectangle = {
x: 0,
y: 75,
width: 100,
height: 50,
borderWidth: 5
};
drawRectangle(myRectangle, context);
// wait one second before starting animationsetTimeout(function() {
var startTime = (new Date()).getTime();
animate(myRectangle, canvas, context, startTime);
}, 1000);</script>
</body>
</html>
x<!DOCTYPE HTML><html>
<head>
<style>
body {margin: 0px;
padding: 0px;
text-align: center;
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="canvas-element" width="480" height="360"></canvas>
<script>
window.requestAnimFrame = (function(callback) {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
function drawRectangle(myRectangle, context) {
context.beginPath();
context.rect(myRectangle.x, myRectangle.y, myRectangle.width, myRectangle.height);
context.fillStyle = '#8ED6FF';
context.fill();
context.lineWidth = myRectangle.borderWidth;
context.strokeStyle = 'black';
context.stroke();
}
function animate(myRectangle, canvas, context, startTime) {
// updatevar time = (new Date()).getTime() - startTime;
// pixels / second^2var gravity = 200;
myRectangle.y = 0.5 * gravity * Math.pow(time / 1000, 2);
if(myRectangle.y > canvas.height - myRectangle.height - myRectangle.borderWidth / 2) {
myRectangle.y = canvas.height - myRectangle.height - myRectangle.borderWidth / 2;
}
lastTime = time;
// clearcontext.clearRect(0, 0, canvas.width, canvas.height);
// drawdrawRectangle(myRectangle, context);
// request new framerequestAnimFrame(function() {
animate(myRectangle, canvas, context, startTime);
});
}
var canvas = document.getElementById('canvas-element');
var context = canvas.getContext('2d');
var myRectangle = {
x: 239,
y: 0,
width: 100,
height: 50,
borderWidth: 5
};
drawRectangle(myRectangle, context);
// wait one second before dropping rectanglesetTimeout(function() {
var startTime = (new Date()).getTime();
animate(myRectangle, canvas, context, startTime);
}, 2000);</script>
</body>
</html>
x<!DOCTYPE HTML><html>
<head>
<style>
body {margin: 0px;
padding: 0px;
text-align: center;
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="canvas-element" width="480" height="360"></canvas>
<script>
window.requestAnimFrame = (function(callback) {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
function drawRectangle(myRectangle, context) {
context.beginPath();
context.rect(myRectangle.x, myRectangle.y, myRectangle.width, myRectangle.height);
context.fillStyle = '#8ED6FF';
context.fill();
context.lineWidth = myRectangle.borderWidth;
context.strokeStyle = 'black';
context.stroke();
}
function animate(myRectangle, canvas, context, startTime) {
// updatevar time = (new Date()).getTime() - startTime;
var amplitude = 150;
// in msvar period = 2000;
var centerX = canvas.width / 2 - myRectangle.width / 2;
var nextX = amplitude * Math.sin(time * 2 * Math.PI / period) + centerX;
myRectangle.x = nextX;
// clearcontext.clearRect(0, 0, canvas.width, canvas.height);
// drawdrawRectangle(myRectangle, context);
// request new framerequestAnimFrame(function() {
animate(myRectangle, canvas, context, startTime);
});
}
var canvas = document.getElementById('canvas-element');
var context = canvas.getContext('2d');
var myRectangle = {
x: 250,
y: 70,
width: 100,
height: 50,
borderWidth: 5
};
drawRectangle(myRectangle, context);
// wait one second before starting animationsetTimeout(function() {
var startTime = (new Date()).getTime();
animate(myRectangle, canvas, context, startTime);
}, 1000);</script>
</body>
</html>
x<!DOCTYPE HTML><html>
<head>
<style>
body {margin: 0px;
padding: 0px;
text-align: center;
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="canvas-element" width="480" height="360"></canvas>
<script>
window.requestAnimFrame = (function(callback) {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
function drawRect(myRectangle, context) {
context.beginPath();
context.rect(myRectangle.x, myRectangle.y, myRectangle.width, myRectangle.height);
context.fillStyle = '#8ED6FF';
context.fill();
context.lineWidth = myRectangle.borderWidth;
context.strokeStyle = 'black';
context.stroke();
}
function animate(lastTime, myRectangle, runAnimation, canvas, context) {
if(runAnimation.value) {
// updatevar time = (new Date()).getTime();
var timeDiff = time - lastTime;
// pixels / secondvar linearSpeed = 100;
var linearDistEachFrame = linearSpeed * timeDiff / 1000;
var currentX = myRectangle.x;
if(currentX < canvas.width - myRectangle.width - myRectangle.borderWidth / 2) {
var newX = currentX + linearDistEachFrame;
myRectangle.x = newX;
}
// clearcontext.clearRect(0, 0, canvas.width, canvas.height);
// drawdrawRect(myRectangle, context);
// request new framerequestAnimFrame(function() {
animate(time, myRectangle, runAnimation, canvas, context);
});
}
}
var canvas = document.getElementById('canvas-element');
var context = canvas.getContext('2d');
var myRectangle = {
x: 0,
y: 75,
width: 100,
height: 50,
borderWidth: 5
};
/* * define the runAnimation boolean as an obect * so that it can be modified by reference */var runAnimation = {
value: false
};
// add click listener to canvasdocument.getElementById('canvas-element').addEventListener('click', function() {
// flip flagrunAnimation.value = !runAnimation.value;
if(runAnimation.value) {
var date = new Date();
var time = date.getTime();
animate(time, myRectangle, runAnimation, canvas, context);
}
});
drawRect(myRectangle, context);
</script>
</body>
</html>
x<!DOCTYPE html><html>
<head>
<title>Sprite Animation Demo</title>
</head>
<body>
<canvas id="coinAnimation"></canvas>
<script>
// Copyright 2013 William Malone (www.williammalone.com) // // Licensed under the Apache License, Version 2.0 (the "License"); // you may not use this file except in compliance with the License. // You may obtain a copy of the License at // // http://www.apache.org/licenses/LICENSE-2.0 // // Unless required by applicable law or agreed to in writing, software // distributed under the License is distributed on an "AS IS" BASIS, // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. // See the License for the specific language governing permissions and // limitations under the License. (function() { // http://paulirish.com/2011/requestanimationframe-for-smart-animating/ // http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating // requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel // MIT licensevar lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
|| window[vendors[x]+'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame)
window.requestAnimationFrame = function(callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() { callback(currTime + timeToCall); },
timeToCall);lastTime = currTime + timeToCall;
return id;
};
if (!window.cancelAnimationFrame)
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}());
(function () {var coin,
coinImage,canvas;
function gameLoop () {
window.requestAnimationFrame(gameLoop);
coin.update();
coin.render();
}
function sprite (options) {
var that = {},
frameIndex = 0,
tickCount = 0,
ticksPerFrame = options.ticksPerFrame || 0,
numberOfFrames = options.numberOfFrames || 1;
that.context = options.context;
that.width = options.width;
that.height = options.height;
that.image = options.image;
that.update = function () {
tickCount += 1;
if (tickCount > ticksPerFrame) {
tickCount = 0;
// If the current frame index is in rangeif (frameIndex < numberOfFrames - 1) {
// Go to the next frameframeIndex += 1;
} else {frameIndex = 0;
}
}
};
that.render = function () {
// Clear the canvasthat.context.clearRect(0, 0, that.width, that.height);
// Draw the animationthat.context.drawImage(
that.image,
frameIndex * that.width / numberOfFrames,
0,that.width / numberOfFrames,
that.height,
0, 0,that.width / numberOfFrames,
that.height);
};
return that;
}
// Get canvascanvas = document.getElementById("coinAnimation");
canvas.width = 100;
canvas.height = 100;
// Create sprite sheetcoinImage = new Image();
// Create spritecoin = sprite({
context: canvas.getContext("2d"),
width: 1000,
height: 100,
image: coinImage,
numberOfFrames: 10,
ticksPerFrame: 4
});
// Load sprite sheetcoinImage.addEventListener("load", gameLoop);
coinImage.src = "assets/coin-sprite-animation.png";
} ());
</script>
</body>
</html>
x<!DOCTYPE HTML><html>
<head>
<style>
body {margin: 0px;
padding: 0px;
text-align: center;
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="canvas-element" width="480" height="360"></canvas>
<script>
function drawImage(imageObj) {
var canvas = document.getElementById('canvas-element');
var context = canvas.getContext('2d');
var imageX = 40;
var imageY = 20;
var imageWidth = imageObj.width;
var imageHeight = imageObj.height;
context.drawImage(imageObj, imageX, imageY);
var imageData = context.getImageData(imageX, imageY, imageWidth, imageHeight);
var data = imageData.data;
// iterate over all pixelsfor(var i = 0, n = data.length; i < n; i += 4) {
var red = data[i];
var green = data[i + 1];
var blue = data[i + 2];
var alpha = data[i + 3];
}
// pick out pixel data from x, y coordinatevar x = 20;
var y = 20;
var red = data[((imageWidth * y) + x) * 4];
var green = data[((imageWidth * y) + x) * 4 + 1];
var blue = data[((imageWidth * y) + x) * 4 + 2];
var alpha = data[((imageWidth * y) + x) * 4 + 3];
// iterate over all pixels based on x and y coordinatesfor(var y = 0; y < imageHeight; y++) {
// loop through each columnfor(var x = 0; x < imageWidth; x++) {
var red = data[((imageWidth * y) + x) * 4];
var green = data[((imageWidth * y) + x) * 4 + 1];
var blue = data[((imageWidth * y) + x) * 4 + 2];
var alpha = data[((imageWidth * y) + x) * 4 + 3];
}
}
}
var imageObj = new Image();
imageObj.onload = function() {
drawImage(this);
};
imageObj.src = 'assets/maldives.jpg';
</script>
</body>
</html>
x<!DOCTYPE HTML><html>
<head>
<style>
body {margin: 0px;
padding: 0px;
text-align: center;
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="canvas-element" width="480" height="400"></canvas>
<script>
function drawImage(imageObj) {
var canvas = document.getElementById('canvas-element');
var context = canvas.getContext('2d');
var x = 40;
var y = 20;
context.drawImage(imageObj, x, y);
var imageData = context.getImageData(x, y, imageObj.width, imageObj.height);
var data = imageData.data;
for(var i = 0; i < data.length; i += 4) {
// reddata[i] = 255 - data[i];
// greendata[i + 1] = 255 - data[i + 1];
// bluedata[i + 2] = 255 - data[i + 2];
}
// overwrite original imagecontext.putImageData(imageData, x, y);
}
var imageObj = new Image();
imageObj.onload = function() {
drawImage(this);
};
imageObj.src = 'assets/maldives.jpg';
</script>
</body>
</html>
x<!DOCTYPE HTML><html>
<head>
<style>
body {margin: 0px;
padding: 0px;
text-align: center;
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="canvas-element" width="480" height="360"></canvas>
<script>
function drawImage(imageObj) {
var canvas = document.getElementById('canvas-element');
var context = canvas.getContext('2d');
var x = 40;
var y = 20;
context.drawImage(imageObj, x, y);
var imageData = context.getImageData(x, y, imageObj.width, imageObj.height);
var data = imageData.data;
for(var i = 0; i < data.length; i += 4) {
var brightness = 0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2];
// reddata[i] = brightness;
// greendata[i + 1] = brightness;
// bluedata[i + 2] = brightness;
}
// overwrite original imagecontext.putImageData(imageData, x, y);
}
var imageObj = new Image();
imageObj.onload = function() {
drawImage(this);
};
imageObj.src = 'assets/maldives.jpg';
</script>
</body>
</html>
x<!DOCTYPE HTML><html>
<head>
<style>
body {margin: 0px;
padding: 0px;
text-align: center;
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="canvas-element" width="480" height="360"></canvas>
<script>
var canvas = document.getElementById('canvas-element');
var context = canvas.getContext('2d');
// draw cloudcontext.beginPath();
context.moveTo(170, 80);
context.bezierCurveTo(130, 100, 130, 150, 230, 150);
context.bezierCurveTo(250, 180, 320, 180, 340, 150);
context.bezierCurveTo(420, 150, 420, 120, 390, 100);
context.bezierCurveTo(430, 40, 370, 30, 340, 50);
context.bezierCurveTo(320, 5, 250, 20, 250, 50);
context.bezierCurveTo(200, 5, 150, 20, 170, 80);
context.closePath();
context.lineWidth = 5;
context.fillStyle = '#8ED6FF';
context.fill();
context.strokeStyle = '#0000ff';
context.stroke();
// save canvas image as data url (png format by default)var dataURL = canvas.toDataURL();
//console.log(dataURL);</script>
</body>
</html>
x<!DOCTYPE HTML><html>
<head>
<style>
body {margin: 0px;
padding: 0px;
text-align: center;
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="canvas-element" width="480" height="360"></canvas>
<script>
function loadCanvas(dataURL) {
var canvas = document.getElementById('canvas-element');
var context = canvas.getContext('2d');
// load image from data urlvar imageObj = new Image();
imageObj.onload = function() {
context.drawImage(this, 0, 0);
};
imageObj.src = dataURL;
}
// make ajax call to get image data urlvar request = new XMLHttpRequest();
request.open('GET', 'assets/dataURL.txt', true);
request.onreadystatechange = function() {
// Makes sure the document is ready to parse.if(request.readyState == 4) {
// Makes sure it's found the file.if(request.status == 200) {
loadCanvas(request.responseText);
}
}
};
request.send(null);
</script>
</body>
</html>
x<!DOCTYPE HTML><html>
<head>
<style>
body {margin: 0px;
padding: 0px;
text-align: center;
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="canvas-element" width="480" height="360" style="display:none;"></canvas>
<img id="canvas-image" alt="Right click to save me!">
<script>
var canvas = document.getElementById('canvas-element');
var context = canvas.getContext('2d');
// draw cloudcontext.beginPath();
context.moveTo(170, 80);
context.bezierCurveTo(130, 100, 130, 150, 230, 150);
context.bezierCurveTo(250, 180, 320, 180, 340, 150);
context.bezierCurveTo(420, 150, 420, 120, 390, 100);
context.bezierCurveTo(430, 40, 370, 30, 340, 50);
context.bezierCurveTo(320, 5, 250, 20, 250, 50);
context.bezierCurveTo(200, 5, 150, 20, 170, 80);
context.closePath();
context.lineWidth = 5;
context.fillStyle = '#8ED6FF';
context.fill();
context.strokeStyle = '#0000ff';
context.stroke();
// save canvas image as data url (png format by default)var dataURL = canvas.toDataURL();
// set canvas-image image src to dataURL // so it can be saved as an imagedocument.getElementById('canvas-image').src = dataURL;
</script>
</body>
</html>
<!DOCTYPE html><html>
<head>
<title>Video/Canvas</title>
<style>
body {margin: 0px;
padding: 0px;
text-align: center;
overflow: hidden;
}
</style>
</head>
<body>
<iframe width="427" height="255" src="//www.youtube.com/embed/sZwmo_2DOz0" frameborder="0" allowfullscreen></iframe>
</body>
</html>
<!DOCTYPE html> <html>
<head>
<title>Video/Canvas Simple</title>
<style>
body {margin: 0px;
padding: 0px;
text-align: center;
overflow: hidden;
background-color: hsla(240, 50%, 90%, 0.2);
}
#canvas-element {position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
}
#video-element {position: absolute;
top: 0%;
left: 0%;
}
p {position: relative;
z-index: 1;
}
</style>
<script>
window.requestAnimFrame = (function(callback) {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
document.addEventListener('DOMContentLoaded', function(){
var video = document.getElementById('video-element');
var canvas = document.getElementById('canvas-element');
var context = canvas.getContext('2d');
var cw = Math.floor(canvas.clientWidth / 4);
var ch = Math.floor(canvas.clientHeight / 4);
canvas.width = cw;
canvas.height = ch;
video.addEventListener('play', function(){
requestAnimFrame(function() {
draw(video,context,cw,ch);
});
},false); },false);function draw(v,c,w,h) {
if(v.paused || v.ended) return false;
c.drawImage(v,0,0,w,h);
requestAnimFrame(function() {
draw(v,c,w,h);
});
}
</script>
</head>
<body>
<canvas id="canvas-element" width="480" height="360"></canvas>
<video id="video-element" controls loop>
<source src="assets/let_it_go.mp4" type="video/mp4" />
<source src="assets/let_it_go.webm" type="video/webm" />
<source src="assets/let_it_go.ogv" type="video/ogg" />
</video>
</body>
</html>
<!DOCTYPE html> <html>
<head>
<title>Video Grayscale</title>
<style>
body {margin: 0px;
padding: 0px;
text-align: center;
overflow: hidden;
background-color: hsla(240, 50%, 90%, 0.2);
}
#canvas-element {position: absolute;
top: 50%;
left: 0%;
width: 100%;
height: 100%;
}
#video-element {position: absolute;
top: 0%;
left: 0%;
}
p {position: relative;
z-index: 1;
}
</style>
<script>
window.requestAnimFrame = (function(callback) {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
document.addEventListener('DOMContentLoaded', function(){
var video = document.getElementById('video-element');
var canvas = document.getElementById('canvas-element');
var context = canvas.getContext('2d');
var backCanvas = document.createElement('canvas');
var backContext = backCanvas.getContext('2d');
var cw = Math.floor(canvas.clientWidth / 4);
var ch = Math.floor(canvas.clientHeight / 4);
canvas.width = cw;
canvas.height = ch;
video.addEventListener('play', function(){
requestAnimFrame(function() {
cw = video.clientWidth;
ch = video.clientHeight;
canvas.width = cw;
canvas.height = ch;
backCanvas.width = cw;
backCanvas.height = ch;
draw(video,context,backContext,cw,ch);
});
},false); },false);function draw(v,c,bc,w,h) {
if(v.paused || v.ended) return false;
// First, draw it into the backing canvasbc.drawImage(v,0,0,w,h);
// Grab the pixel data from the backing canvasvar idata = bc.getImageData(0,0,w,h);
var data = idata.data;
// Loop through the pixels, turning them grayscalefor(var i = 0; i < data.length; i+=4) {
var r = data[i];
var g = data[i+1];
var b = data[i+2];
var brightness = (3*r+4*g+b)>>>3;
data[i] = brightness;
data[i+1] = brightness;
data[i+2] = brightness;
}
idata.data = data;
// Draw the pixels onto the visible canvasc.putImageData(idata,0,0);
// Start over!requestAnimFrame(function() {
draw(v,c,bc,w,h);
});
}
</script>
</head>
<body>
<canvas id="canvas-element" width="480" height="360"></canvas>
<video id="video-element" controls loop>
<source src="assets/let_it_go.webm" type="video/webm" />
<source src="assets/let_it_go.mp4" type="video/mp4" />
<source src="assets/let_it_go.ogv" type="video/ogg" />
</video>
</body>
</html>
x<!DOCTYPE html> <html>
<head>
<title>Video Grayscale</title>
<style>
body {margin: 0px;
padding: 0px;
text-align: center;
overflow: hidden;
background-color: hsla(240, 50%, 90%, 0.2);
}
#canvas-element {position: absolute;
top: 50%;
left: 0%;
width: 100%;
height: 100%;
}
#video-element {position: absolute;
top: 0%;
left: 0%;
}
p {position: relative;
z-index: 1;
}
</style>
<script>
window.requestAnimFrame = (function(callback) {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
document.addEventListener('DOMContentLoaded', function(){
var video = document.getElementById('video-element');
var canvas = document.getElementById('canvas-element');
var context = canvas.getContext('2d');
var backCanvas = document.createElement('canvas');
var backContext = backCanvas.getContext('2d');
var cw = Math.floor(canvas.clientWidth / 4);
var ch = Math.floor(canvas.clientHeight / 4);
canvas.width = cw;
canvas.height = ch;
video.addEventListener('play', function(){
requestAnimFrame(function() {
cw = video.clientWidth;
ch = video.clientHeight;
canvas.width = cw;
canvas.height = ch;
backCanvas.width = cw;
backCanvas.height = ch;
draw(video,context,backContext,cw,ch);
draw(video,context,cw,ch);
});
},false); },false);function draw(v,c,bc,w,h) {
if(v.paused || v.ended) return false;
// First, draw it into the backing canvasbc.drawImage(v,0,0,w,h);
// Grab the pixel data from the backing canvasvar idata = bc.getImageData(0,0,w,h);
var data = idata.data;
var iw = idata.width;
var limit = data.length
// Loop through the subpixels, convoluting each using an edge-detection matrix.for(var i = 0; i < limit; i++) {
if( i%4 == 3 ) continue;
data[i] = 127 + 2*data[i] - data[i + 4] - data[i + iw*4];
}
// Draw the pixels onto the visible canvasc.putImageData(idata,0,0);
// Start over!requestAnimFrame(function() {
draw(v,c,bc,w,h);
});
}
</script>
</head>
<body>
<canvas id="canvas-element" width="480" height="360"></canvas>
<video id="video-element" controls loop>
<source src="assets/let_it_go.ogv" type="video/ogg" />
<source src="assets/let_it_go.mp4" type="video/mp4" />
<source src="assets/let_it_go.webm" type="video/webm" />
</video>
</body>
</html>