Canvas Project

I decided to do my project about Super Mario. I chose Mario because I was searching through the internet for some inspiration and found that picture. I spent about 8 hours on this project. I was really scared at first because I did not know how to code but after getting used to it, it was way easier. I used different shapes like circles triangles, arcs, and squares.

 I created this art in Dreamweaver using HTML. Having to use different shapes was hard because you have to place them where you want them. This was the most challenging part because it was difficult and time-consuming to place every coordinate where you want it. After getting used to it and getting better at it it was easier than at first. 

                                                            Inspiration:

Sketch:

Code:

// BACKGROUND

context.beginPath();

context.rect(0,0,800,600); // x,y,w,h

context.closePath();

context.fillStyle = "rgba(87,133,221,1.00)";

context.fill();

context.strokeStyle = "rgba(44,47,51,1)";

context.stroke();

context.closePath();

//Rectangle 1

var x=150;

var y=100;

var width = 100

var height= 100;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 10;

context.fillStyle = 'rgba(177,128,57,1.00)';

context.strokeStyle = 'rgba(177,128,57,1.00)';

context.fill();

context.stroke();

//Rectangle 2

var x=450;

var y=100;

var width = 340

var height= 100;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 10;

context.fillStyle = 'rgba(177,128,57,1.00)';

context.strokeStyle = 'rgba(177,128,57,1.00)';

context.fill();

context.stroke();

//Rectangle 3

var x=570;

var y=100;

var width = 100

var height= 100;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 10;

context.fillStyle = 'rgba(101,67,17,1.00)';

context.strokeStyle = 'rgba(101,67,17,1.00)';

context.fill();

context.stroke();

//Rectangle 2

var x=0;

var y=490;

var width = 800

var height= 100;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 10;

context.fillStyle = 'rgba(177,128,57,1.00)';

context.strokeStyle = 'rgba(177,128,57,1.00)';

context.fill();

context.stroke();

//Arc green

 // starting point coordinates

var x = 130;

var y = 486;

// control point coordinates ( magnet )

var cpointX = canvas.width / 2 - 150;

var cpointY = canvas.height / 2 -100;

// ending point coordinates

var x1 = 370;

var y1 = 486;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.fillStyle = 'rgba(16,96,29,1.00)';

context.lineWidth = 3;

context.strokeStyle = "rgba(12,12,13,1.00)";

context.fill();

context.stroke();

 //Rectangle on the mountain

var x=240;

var y=400;

var width = 10

var height= 30;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 10;

context.fillStyle = 'rgba(10,10,9,1.00)';

context.strokeStyle = 'rgba(0,0,0,1.00)';

context.fill();

context.stroke();

////circle mountain

 

  var centerX = canvas.width /3;

        var centerY = canvas.height / 1.5;

        var radius = 7;

        var startangle = 0;

        var endangle = 2 * Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

    

        context.lineWidth = 5;

        context.strokeStyle = "black";

context.fillStyle = 'rgba(7,7,7,1.00)';

context.fill();

        context.stroke();

 

////circle 1 square botto left

 

  var centerX = canvas.width /5.3;

        var centerY = canvas.height / 3;

        var radius = 2;

        var startangle = 0;

        var endangle = 2 * Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

    

        context.lineWidth = 5;

        context.strokeStyle = "black";

context.fillStyle = 'rgba(7,7,7,1.00)';

context.fill();

        context.stroke();

////circle 2 square top left

 

  var centerX = canvas.width /5.3;

        var centerY = canvas.height / 5.9;

        var radius = 2;

        var startangle = 0;

        var endangle = 2 * Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

    

        context.lineWidth = 5;

        context.strokeStyle = "black";

context.fillStyle = 'rgba(7,7,7,1.00)';

context.fill();

        context.stroke();

 ////circle 3 square bottom right

 

  var centerX = canvas.width /3.2;

        var centerY = canvas.height / 3;

        var radius = 2;

        var startangle = 0;

        var endangle = 2 * Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

    

        context.lineWidth = 5;

        context.strokeStyle = "black";

context.fillStyle = 'rgba(7,7,7,1.00)';

context.fill();

        context.stroke();

////circle 4 square top left

 

  var centerX = canvas.width /3.2;

        var centerY = canvas.height / 5.9;

        var radius = 2;

        var startangle = 0;

        var endangle = 2 * Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

    

        context.lineWidth = 5;

        context.strokeStyle = "black";

context.fillStyle = 'rgba(7,7,7,1.00)';

context.fill();

        context.stroke();

////circle 1 square bottom left on rectangle

 

  var centerX = canvas.width /1.77;

        var centerY = canvas.height / 3;

        var radius = 2;

        var startangle = 0;

        var endangle = 2 * Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

    

        context.lineWidth = 5;

        context.strokeStyle = "black";

context.fillStyle = 'rgba(7,7,7,1.00)';

context.fill();

        context.stroke();

////circle 2 square top left on the rectangle

 

  var centerX = canvas.width /1.77;

        var centerY = canvas.height / 5.9;

        var radius = 2;

        var startangle = 0;

        var endangle = 2 * Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

    

        context.lineWidth = 5;

        context.strokeStyle = "black";

context.fillStyle = 'rgba(7,7,7,1.00)';

context.fill();

        context.stroke();

////circle 3 square bottom right on the rectangle

 

  var centerX = canvas.width /1.43;

        var centerY = canvas.height / 3;

        var radius = 2;

        var startangle = 0;

        var endangle = 2 * Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

    

        context.lineWidth = 5;

        context.strokeStyle = "black";

context.fillStyle = 'rgba(7,7,7,1.00)';

context.fill();

        context.stroke();

////circle 4 square top left on the rectangle

 

  var centerX = canvas.width /1.43;

        var centerY = canvas.height / 5.9;

        var radius = 2;

        var startangle = 0;

        var endangle = 2 * Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

    

        context.lineWidth = 5;

        context.strokeStyle = "black";

context.fillStyle = 'rgba(7,7,7,1.00)';

context.fill();

        context.stroke();

////circle 1 square bottom left on rectangle to the right

 

  var centerX = canvas.width /1.17

        var centerY = canvas.height / 3;

        var radius = 2;

        var startangle = 0;

        var endangle = 2 * Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

    

        context.lineWidth = 5;

        context.strokeStyle = "black";

context.fillStyle = 'rgba(7,7,7,1.00)';

context.fill();

        context.stroke();

////circle 2 square top left on the rectangle to the right

 

  var centerX = canvas.width /1.17;

        var centerY = canvas.height / 5.9;

        var radius = 2;

        var startangle = 0;

        var endangle = 2 * Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

    

        context.lineWidth = 5;

        context.strokeStyle = "black";

context.fillStyle = 'rgba(7,7,7,1.00)';

context.fill();

        context.stroke();

////circle 3 square bottom right on the rectangle on the right

 

  var centerX = canvas.width /1.013;

        var centerY = canvas.height / 3;

        var radius = 2;

        var startangle = 0;

        var endangle = 2 * Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

    

        context.lineWidth = 5;

        context.strokeStyle = "black";

context.fillStyle = 'rgba(7,7,7,1.00)';

context.fill();

        context.stroke();

////circle 4 square top left on the rectangle

 

  var centerX = canvas.width /1.013;

        var centerY = canvas.height / 5.9;

        var radius = 2;

        var startangle = 0;

        var endangle = 2 * Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

    

        context.lineWidth = 5;

        context.strokeStyle = "black";

context.fillStyle = 'rgba(7,7,7,1.00)';

context.fill();

        context.stroke();

//  Question mark 1

context.beginPath();

context.font = "95px sans-serif"

context.fillStyle = "rgba(98,69,24,1.00)";

context.fillText ("?", 179, 182);

context.closePath();

//  Question mark 2

context.beginPath();

context.font = "95px sans-serif"

context.fillStyle = "rgba(98,69,24,1.00)";

context.fillText ("?", 479, 182);

context.closePath();

//  Question mark 3

context.beginPath();

context.font = "95px sans-serif"

context.fillStyle = "rgba(98,69,24,1.00)";

context.fillText ("?", 715, 182);

context.closePath();

//  pattern

context.beginPath();

context.font = "35px sans-serif"

context.fillStyle = "rgba(0,0,0,1.00)";

context.fillText ("-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|", 0, 595);

context.closePath();

//  pattern

context.beginPath();

context.font = "35px sans-serif"

context.fillStyle = "rgba(0,0,0,1.00)";

context.fillText ("-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|", 0, 583);

context.closePath();

//  pattern

context.beginPath();

context.font = "35px sans-serif"

context.fillStyle = "rgba(0,0,0,1.00)";

context.fillText ("-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|", 0, 571);

context.closePath();

//  pattern

context.beginPath();

context.font = "35px sans-serif"

context.fillStyle = "rgba(0,0,0,1.00)";

context.fillText ("-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|", 0, 559);

context.closePath();

//  pattern

context.beginPath();

context.font = "35px sans-serif"

context.fillStyle = "rgba(0,0,0,1.00)";

context.fillText ("-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|", 0, 547);

context.closePath();

//  pattern

context.beginPath();

context.font = "35px sans-serif"

context.fillStyle = "rgba(0,0,0,1.00)";

context.fillText ("-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|", 0, 535);

context.closePath();

//  patern

context.beginPath();

context.font = "35px sans-serif"

context.fillStyle = "rgba(0,0,0,1.00)";

context.fillText ("-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|", 0, 523);

context.closePath();

//  pattern

context.beginPath();

context.font = "35px sans-serif"

context.fillStyle = "rgba(0,0,0,1.00)";

context.fillText ("-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|", 0, 511);

context.closePath();

//  pattern on top single

context.beginPath();

context.font = "33.4px sans-serif"

context.fillStyle = "rgba(0,0,0,1.00)";

context.fillText ("|----|----|", 562, 120);

context.closePath();

//  pattern on top single

context.beginPath();

context.font = "33.4px sans-serif"

context.fillStyle = "rgba(0,0,0,1.00)";

context.fillText ("|----|----|", 562, 130);

//  pattern on top single

context.beginPath();

context.font = "33.4px sans-serif"

context.fillStyle = "rgba(0,0,0,1.00)";

context.fillText ("|----|----|", 562, 140);

context.closePath();

context.closePath();

//  pattern on top single

context.beginPath();

context.font = "33.4px sans-serif"

context.fillStyle = "rgba(0,0,0,1.00)";

context.fillText ("|----|----|", 562, 150);

context.closePath();

//  pattern on top single

context.beginPath();

context.font = "33.4px sans-serif"

context.fillStyle = "rgba(0,0,0,1.00)";

context.fillText ("|----|----|", 562, 160);

context.closePath();

//  pattern on top single

context.beginPath();

context.font = "33.4px sans-serif"

context.fillStyle = "rgba(0,0,0,1.00)";

context.fillText ("|----|----|", 562, 170);

context.closePath();

//  pattern on top single

context.beginPath();

context.font = "33.4px sans-serif"

context.fillStyle = "rgba(0,0,0,1.00)";

context.fillText ("|----|----|", 562, 180);

context.closePath();

//  pattern on top single

context.beginPath();

context.font = "33.4px sans-serif"

context.fillStyle = "rgba(0,0,0,1.00)";

context.fillText ("|----|----|", 562, 190);

context.closePath();

//  pattern on top single

context.beginPath();

context.font = "33.4px sans-serif"

context.fillStyle = "rgba(0,0,0,1.00)";

context.fillText ("|----|----|", 562, 200);

context.closePath();

//  pattern on top single

context.beginPath();

context.font = "33.4px sans-serif"

context.fillStyle = "rgba(0,0,0,1.00)";

context.fillText ("|----|----|", 562, 206);

context.closePath();

// starting point coordinates

var x = 0;

var y = 485;

// control point coordinates ( magnet )

var cpointX = canvas.width / 2.5 - 350;

var cpointY = canvas.height / 2 - 10;

// ending point coordinates

var x1 = 109;

var y1 =485;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.fillStyle = 'rgba(35,212,64,1.00)';

context.lineWidth = 5;

context.strokeStyle = "rgba(2,2,2,1.00)";

context.stroke();

context.fill();

 

//left TRIANGLE

context.beginPath(); // begin a shape

 

context.moveTo(400,420); // point A coordinates

context.lineTo(445, 460); // point B coords

context.lineTo(360,460); // point C coords

context.fillStyle = "rgba(127,96,31,1.00)";

context.fill();

context.closePath(); // close the shape

context.lineWidth = 5; // you can use a variable that changes wherever you see a number

context.lineJoin = "round";

context.strokeStyle = "rgba(127,96,31,1.00)"; // Reb Green Blue Alpha

context.stroke();

////left eye for the mushroom

 

  var centerX = canvas.width /2.04;

        var centerY = canvas.height / 1.37;

        var radius = 2.7;

        var startangle = 0;

        var endangle = 2 * Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

    

        context.lineWidth = 5;

        context.strokeStyle = "black";

context.fillStyle = 'rgba(7,7,7,1.00)';

context.fill();

        context.stroke();

////right eye for the mushroom

 

  var centerX = canvas.width /1.97;

        var centerY = canvas.height / 1.37;

        var radius = 2.7;

        var startangle = 0;

        var endangle = 2 * Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

    

        context.lineWidth = 5;

        context.strokeStyle = "black";

context.fillStyle = 'rgba(7,7,7,1.00)';

context.fill();

        context.stroke();

//left leg

var x=379;

var y=465;

var width = 5

var height= 20;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 10;

context.fillStyle = 'rgba(10,10,9,1.00)';

context.strokeStyle = 'rgba(0,0,0,1.00)';

context.fill();

context.stroke();

//right leg

var x=414;

var y=465;

var width = 5

var height= 20;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 10;

context.fillStyle = 'rgba(10,10,9,1.00)';

context.strokeStyle = 'rgba(0,0,0,1.00)';

context.fill();

context.stroke();

//Right foot

var x=414;

var y=478;

var width = 15

var height= 8;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 10;

context.fillStyle = 'rgba(10,10,9,1.00)';

context.strokeStyle = 'rgba(0,0,0,1.00)';

context.fill();

context.stroke();

//left foot

var x=369;

var y=478;

var width = 15

var height= 8;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 10;

context.fillStyle = 'rgba(10,10,9,1.00)';

context.strokeStyle = 'rgba(0,0,0,1.00)';

context.fill();

context.stroke();

// right bush

var x = 700;

var y = 487;

// control point coordinates ( magnet )

var cpointX = canvas.width / 1.0 - 1;

var cpointY = canvas.height / 2 - 18;

// ending point coordinates

var x1 = 800;

var y1 =487;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.fillStyle = 'rgba(35,212,64,1.00)';

context.lineWidth = 5;

context.strokeStyle = "rgba(2,2,2,1.00)";

context.stroke();

context.fill();

 

////Mario head

 

  var centerX = canvas.width /5;

        var centerY = canvas.height / 2.2;

        var radius = 20;

        var startangle = 0;

        var endangle = 2 * Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

    

        context.lineWidth = 5;

        context.strokeStyle = "rgba(54,165,81,1.00)";

context.fillStyle = '#FFFF00';

context.fill();

        context.stroke();

// marios body square

var x=141;

var y=287;

var width = 40

var height= 40;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 10;

context.fillStyle = 'rgba(252,4,59,1.00)';

context.strokeStyle = 'rgba(54,165,81,1.00)';

context.fill();

context.stroke();

////Left eye for mario

 

  var centerX = canvas.width /5.3;

        var centerY = canvas.height / 2.3;

        var radius = 2;

        var startangle = 0;

        var endangle = 2 * Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

    

        context.lineWidth = 5;

        context.strokeStyle = "black";

context.fillStyle = 'rgba(7,7,7,1.00)';

context.fill();

        context.stroke();

//// right eye for mario

 

  var centerX = canvas.width /4.9;

        var centerY = canvas.height / 2.3;

        var radius = 2;

        var startangle = 0;

        var endangle = 2 * Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

    

        context.lineWidth = 5;

        context.strokeStyle = "black";

context.fillStyle = 'rgba(7,7,7,1.00)';

context.fill();

        context.stroke();

//Right leg mario

var x=185;

var y=325;

var width = 20

var height= 4;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 10;

context.fillStyle = 'rgba(10,10,9,1.00)';

context.strokeStyle = 'rgba(0,0,0,1.00)';

context.fill();

context.stroke();

//right foot mario

var x=200;

var y=310;

var width = 5

var height= 10;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 10;

context.fillStyle = 'rgba(244,2,32,1.00)';

context.strokeStyle = 'rgba(250,4,8,1.00)';

context.fill();

context.stroke();

//left leg mario

 

var x=118;

var y=325;

var width = 20

var height= 4;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 10;

context.fillStyle = 'rgba(10,10,9,1.00)';

context.strokeStyle = 'rgba(1,1,1,1.00)';

context.fill();

context.stroke();

//left leg

var x=118;

var y=325;

var width = 5

var height= 20;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 10;

context.fillStyle = 'rgba(247,5,5,1.00)';

context.strokeStyle = 'rgba(250,1,5,1.00)';

context.fill();

context.stroke();

//right hand

context.moveTo(180,290); // COORDINATES OF STARTING POINT

context.lineTo(210,260); // COORDS OF ENDING POINT 1

context.lineWidth = 5; // STROKE WIDTH

context.stroke(); // STROKE

//left hand

context.moveTo(140,290); // COORDINATES OF STARTING POINT

context.lineTo(110,295); // COORDS OF ENDING POINT 1

context.lineWidth = 5; // STROKE WIDTH

context.stroke(); // STROKE

//Hat

var x=150;

var y=240;

var width = 20

var height= 8;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 8;

context.fillStyle = 'rgba(249,2,22,1.00)';

context.strokeStyle = 'rgba(250,1,5,1.00)';

context.fill();

context.stroke();

//hat

context.moveTo(200,253); // COORDINATES OF STARTING POINT

context.lineTo(145,253); // COORDS OF ENDING POINT 1

context.lineWidth = 5; // STROKE WIDTH

context.stroke(); // STROKE