Canvas Intro

Canvas basics, including the jCanvas plugin.

by tcloninger

HTML

<script src="https://raw.github.com/caleb531/jcanvas/master/builds/5.4/jcanvas.min.js"></script>
<canvas id="canvas" width="500" height="500"></canvas>

CSS

html{
    background-color:#ddf;
}

canvas{ 
    border: 1px dashed #999; 
}

JavaScript

// JAVASCRIPT
// good ole plain javascript
context = document.getElementById('canvas').getContext('2d');

context.beginPath();
context.moveTo(10, 10);
context.lineTo(200, 270);

context.strokeStyle = '#000000';
context.stroke();


context.moveTo(220, 100);
context.lineTo(200, 270);
context.stroke();
    
    
// jQUERY
// via jCanvas, http://calebevans.me/projects/jcanvas/docs.php
$("canvas").drawLine({
  strokeStyle: "#000",
  strokeWidth: 5,
  rounded: true,
  x1: 250, y1: 50,
  x2: 300, y2: 150,
  x3: 400, y3: 100,
  x4: 350, y4: 200
});