Skip to content

Instantly share code, notes, and snippets.

@dameleon

dameleon/index.html

Last active August 29, 2015 14:06
Show Gist options
  • Save dameleon/67e5abe3383d5d201532 to your computer and use it in GitHub Desktop.
Save dameleon/67e5abe3383d5d201532 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1">
<style>
</style>
</head>
<body>
<h2>sample1</h2>
<p>draw rectangle to 256x256 pixels canvas with clipping</p>
<canvas id="sample1" width="256" height="256"></canvas>
<h2>sample2</h2>
<p>draw trapezoid to 256x256 pixels canvas with clipping</p>
<canvas id="sample2" width="256" height="256"></canvas>
<h2>sample3</h2>
<p>draw rectangle to 256x257 pixels canvas with clipping</p>
<canvas id="sample3" width="256" height="257"></canvas>
<h2>sample4</h2>
<p>draw trapezoid to 256x257 pixels canvas with clipping</p>
<canvas id="sample4" width="256" height="257"></canvas>
<script>
var sampleOne = document.getElementById('sample1');
var sampleTwo = document.getElementById('sample2');
var sampleThree = document.getElementById('sample3');
var sampleFour = document.getElementById('sample4');
// sample1 - draw rectangle to 256x256 pixels canvas with clipping
ctx = sampleOne.getContext('2d');
ctx.fillStyle = '#f00';
ctx.beginPath();
ctx.moveTo(1, 1);
ctx.lineTo(10, 1);
ctx.lineTo(10, 10);
ctx.lineTo(1, 10);
ctx.closePath();
ctx.clip();
ctx.fillRect(0, 0, 256, 256);
// sample2 - draw trapezoid to 256x256 pixels canvas with clipping
ctx = sampleTwo.getContext('2d');
ctx.fillStyle = '#f00';
ctx.beginPath();
ctx.moveTo(1, 1);
ctx.lineTo(10, 1);
ctx.lineTo(14, 10);
ctx.lineTo(1, 10);
ctx.closePath();
ctx.clip();
ctx.fillRect(0, 0, 256, 256);
// sample3 - draw rectangle to 256x257 pixels canvas with clipping
ctx = sampleThree.getContext('2d');
ctx.fillStyle = '#f00';
ctx.beginPath();
ctx.moveTo(1, 1);
ctx.lineTo(10, 1);
ctx.lineTo(10, 10);
ctx.lineTo(1, 10);
ctx.closePath();
ctx.clip();
ctx.fillRect(0, 0, 256, 257);
// sample4 - draw trapezoid to 256x257 pixels canvas with clipping
ctx = sampleFour.getContext('2d');
ctx.fillStyle = '#f00';
ctx.beginPath();
ctx.moveTo(1, 1);
ctx.lineTo(10, 1);
ctx.lineTo(14, 10);
ctx.lineTo(1, 10);
ctx.closePath();
ctx.clip();
ctx.fillRect(0, 0, 256, 257);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment