Template for canvas html5/jquery/javascript

Question

I am a beginner at HTML5, Jquery/JavaScript. I am attempting to create a canvas (sort of like windows paint application) and I am looking at other users sample functions/code to see whats it going on and attempt to re-create it.

$(function(){
var paint = new Paint($('#surface').get(0));

// Setup line template
var templateLine = new Paint($('#toolbar #line').get(0), {'readonly': true});
templateLine.shape = new Line([10, 10], [50, 50]);
templateLine.place(templateLine.shape);

I am unsure what is going on here. I know this new Paint is not an internal built-in function. What is it? Secondly whats the difference between this and

$( document).ready(function(){
var canvas = $("#canvas").get(0);
if (canvas.getContext) {
        var ctx = canvas.getContext("2d");

        // Choose a color
        ctx.fillStyle = "black";
        ctx.strokeStyle = color;
        ctx.fillRect(0, 0, 50, 50);
    } else {
        // Browser doesn't support CANVAS
    }
});

Help!!!

Answer 1

Well, first off, the code you're looking at in the beginning of your question was probably using some canvas library or API, but that is not the vanilla HTML5 Canvas API, making it completely different from what you've written below, even if they have the same output (although it doesn't look like they do).

Secondly, color is not defined, so unless that's defined in your code somewhere else, your code's not going to work. Otherwise, your code will draw a black rectangle in the corner of the canvas with the stroke color of whatever color is.