Skip to content

Instantly share code, notes, and snippets.

@sk8terboi87

sk8terboi87/gist:73628c5052d206abf8b8

Created August 18, 2014 12:35
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save sk8terboi87/73628c5052d206abf8b8 to your computer and use it in GitHub Desktop.
Save sk8terboi87/73628c5052d206abf8b8 to your computer and use it in GitHub Desktop.
Download ZIP
Canvas
Raw
gistfile1.txt
<html>
<head>
<style type="text/css">
canvas {
border: solid 1px #000;
}
</style>
<script type="text/javascript">
var canvasRect, canvasLine, canvasText;
function drawRect() {
var canvasContext;
canvasRect = document.getElementById('box');
canvasContext = canvasRect.getContext('2d');
canvasContext.fillRect(1, 10, 50, 50);
}
function drawLine() {
var canvasContext;
canvasLine = document.getElementById('line');
canvasContext = canvasLine.getContext('2d');
canvasContext.beginPath();
canvasContext.moveTo(10, 30);
canvasContext.lineTo(100, 150);
canvasContext.lineWidth = 10;
canvasContext.strokeStyle = 'red';
canvasContext.stroke();
}
function drawText() {
var canvasContext;
canvasText = document.getElementById('text');
canvasContext = canvasText.getContext('2d');
canvasContext.font = "bold 18pt sans-serif";
canvasContext.fillText("x", 2, 10);
canvasContext.fillText("y", 50, 100);
}
function clearRect() {
canvasRect.width = canvasRect.width;
canvasLine.width = canvasLine.width;
canvasText.width = canvasText.width;
}
</script>
</html>
<canvas id='box' width='100px' height='100px'></canvas>
<canvas id='line' width='100px' height='100px'></canvas>
<canvas id='text' width='100px' height='100px'></canvas>
Raw
gistfile2.txt
http://www.html5canvastutorials.com/tutorials/html5-canvas-wrap-text-tutorial/
http://diveintohtml5.info/canvas.html
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment