Canvas Project- Scrappy Doo

     In this project, we were to pick an image, draw it, and then remake the image using HTML code on a canvas. The image I picked was Scrappy Doo from the cartoons. When I was first sketching this cartoon, I realized how some parts of it are more complex lines and some are much more simple and easy to draw using code. After having the image drawn, I used Adobe Dreamweaver and HTML code to start tracing the outline of Scrappy using shapes, quadratic curves, and Bezier curves. After I was done tracing my sketch, I starting to fill in the different shapes that I had drawn. This is where I encountered my first problem. I was unable to fill in the body of Scrappy doo because his body was most drawn using quadratic curves. I tried my hardest to figure out a way to fill in his body, but the code did not allow it because it does not count the curves that I used to make his body as completed shapes. Despite this hiccup, I continued to make the background and added some shapes into his body to make it look a little bit more cubist and interesting. The background was made with 5 different colors and a circle gradient that I pulled toward the bottom of the screen to have half moon type of effect.

    Overall, this project took me about 15 hours total to complete. I believe that I learned a lot about HTML code during this process but I am definitely no expert. I think if I were to do this project again I would figure out a different way to draw the body of Scrappy so that I am able to fill him in brown. However, I am still happy with the picture and I think that the different crazy colors resemble how crazy of a character that Scrappy was in the TV show.



FULL CODE:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">



<title> CANVAS PROJECT 1- SCRAPPY DOO </title>



<!-- import external .js scripts here -->

<!-- <script type="text/javascript" src="#" ></script> -->


<!-- modify CSS properties here --> 

<style type="text/css">

body,td,th { 
font-family: Monaco, "Courier New", "monospace"; 
font-size: 14px; 
color: rgba(255,255,255,1); 
}

body {
background-color: rgba(0,0,0,1); 
}

#container {
position: relative;
text-align: left;
width: 95%;
height: 800px;
} 

#fmxCanvas { 
position: relative; 
background-color:rgba(255,255,255,1); 
border: rgba(255,255,255,1) thin dashed; 
cursor: crosshair; 
display: inline-block; 
}

</style>

</head>



<body>

<div id="container">
<!-- START HTML CODE HERE --> 



<canvas id="fmxCanvas" width="700" height="900"></canvas>

<div id="display"></div>

<img src="Scrappy.png" alt="Scrappy" id="img1" />


<!-- FINISH HTML CODE HERE --> 
</div>

<script>

///////////////////////////////////////////////////////////////////////
// DECLARE requestAnimFrame

var rAF = window.requestAnimFrame ||
window.mozRequestAnimFrame ||
window.webkitRequestAnimFrame ||
window.msRequestAnimFrame;

var fps = 30;

window.requestAnimFrame = (

function(callback) {

return rAF ||

function(callback) {
window.setTimeout(callback, 1000 / fps);
};

})(); 

///////////////////////////////////////////////////////////////////////
// DEFINE GLOBAL VARIABLES HERE

var canvas;
var context;
canvas = document.getElementById("fmxCanvas");
context = canvas.getContext("2d");

var canvas1;
var context1;
canvas1 = document.createElement("canvas");
context1 = canvas1.getContext("2d");

canvas1.width = canvas.width;
canvas1.height = canvas.height;

var display;
display = document.getElementById('display');

var counter;


///////////////////////////////////////////////////////////////////////
// DEFINE YOUR GLOBAL VARIABLES HERE 
var img1 = new Image();
    img1 = document.getElementById("img1");

///////////////////////////////////////////////////////////////////////
// CALL THE EVENT LISTENERS

window.addEventListener("load", setup, false);


//////////////////////////////////////////////////////////////////////
// ADD EVENT LISTENERS

canvas.addEventListener("mousemove", mousePos, false);

//////////////////////////////////////////////////////////////////////
// MOUSE COORDINATES

var stage, mouseX, mouseY;

function mousePos(event) {
stage = canvas.getBoundingClientRect();
mouseX = event.clientX - stage.left;
mouseY = event.clientY - stage.top;
}

/////////////////////////////////////////////////////////////////////
// INITIALIZE THE STARTING FUNCTION

function setup() {

/////////////////////////////////////////////////////////////////////
// DECLARE STARTING VALUES OF GLOBAL VARIABLES

counter = 0;
mouseX = canvas.width/2;
mouseY = canvas.height/2;

/////////////////////////////////////////////////////////////////////
// CALL SUBSEQUENT FUNCTIONS, as many as you need

clear(); // COVER TRANSPARENT CANVAS OR CLEAR CANVAS

draw(); // THIS IS WHERE EVERYTHING HAPPENS

}

////////////////////////////////////////////////////////////////////
// CLEAR THE CANVAS FOR ANIMATION
// USE THIS AREA TO MODIFY BKGD

function clear() {

context.clearRect(0,0,canvas.width, canvas.height);
context1.clearRect(0,0,canvas.width, canvas.height); 

// clear additional contexts here if you have more than canvas1 

}

////////////////////////////////////////////////////////////////////
// THIS IS WHERE EVERYTHING HAPPENS

function draw() {

counter += 0.1; // EASIER FOR SINE COSINE FUNCTIONS

if (counter > Math.PI*200) { counter = 0; } // RESET COUNTER 

clear(); // USE THIS TO REFRESH THE FRAME AND CLEAR CANVAS

//////////////////////////////////////////////////////////////////// 
// >>>START HERE>>>START HERE>>>START HERE>>>START HERE>>>START HERE

context.drawImage(img1, 0, 0, canvas.width, canvas.height);

//Background 
var bkgdgrd  = context.createRadialGradient(350, 900, 50, 350, 900, 600);
bkgdgrd.addColorStop(0, "rgba(122,0,128,1.00)");
    bkgdgrd.addColorStop(0.2, "rgba(128,0,128,1.00)");
    bkgdgrd.addColorStop(0.4, "rgba(255,0,64,1.00)");
    bkgdgrd.addColorStop(0.6, "rgba(0,255,255,1.00)");
    bkgdgrd.addColorStop(0.8, "rgba(255,0,0,1.00)");
    bkgdgrd.addColorStop(1, "rgba(110,43,212,1.00)");
    
context.beginPath();
context.rect(0,0,canvas.width,canvas.height);
context.closePath();
context.fillStyle = bkgdgrd;
context.fill();
//Left Ear
context.beginPath();
    
        context.moveTo(254,178);
        context.bezierCurveTo(231,172,346,72,365,115);
context.bezierCurveTo(394,90,278,199,254,178);
        
    context.closePath();  
context.fillStyle = "#814905";
context.fill();
    context.strokeStyle = "black";   
    context.lineWidth = 5;   
    context.stroke();
context.beginPath();
    
        context.moveTo(350,129);
        context.bezierCurveTo(257,159,322,281,347,201);
context.bezierCurveTo(369,164,355,119,350,129);
  
    context.closePath();
context.fillStyle = "#814905";
context.fill();
    context.strokeStyle = "black";
    context.lineWidth = 5;
    context.stroke();
context.beginPath();
    
        context.moveTo(365,111);
        context.bezierCurveTo(337,120,261,281,439,190);
//context.bezierCurveTo(mouseX,mouseY,261,281,365,111);
  
    context.closePath();
context.fillStyle = "#814905";
context.fill();
    context.strokeStyle = "black";
    context.lineWidth = 5;
    context.stroke(); 


//Right Ear
 context.beginPath();
    
        context.moveTo(498,33);
        context.bezierCurveTo(425,94,450,238,555,283);
context.bezierCurveTo(600,184,630,141,498,33);
        
    context.closePath();
    context.fillStyle = "#814905";
context.fill();
    context.strokeStyle = "black";
    
    context.lineWidth = 5;
    
    context.stroke();
context.beginPath();
    
        context.moveTo(525,207);
        context.bezierCurveTo(482,152,498,114,525,106);
context.bezierCurveTo(600,163,476,254,525,207);
context.closePath();
context.strokeStyle = "black";
    
    context.lineWidth = 5;
    
    context.stroke();
//Head
context.beginPath();
    
        context.moveTo(562,270);
        context.bezierCurveTo(606,403,582,468,444,511);
        context.bezierCurveTo(7,527,348,-7,562,270);
    context.closePath();
    context.fillStyle = "#814905";
context.fill();
    context.strokeStyle = "black";
    
    context.lineWidth = 5;
    
    context.stroke();
context.beginPath();
 
context.moveTo(180,286);
context.bezierCurveTo(95,388,254,465,258,424);
  context.closePath();
    context.fillStyle = "#814905";
context.fill();
    context.strokeStyle = "black";
    
    context.lineWidth = 5;
    
    context.stroke();
context.beginPath();
context.moveTo(283,263);
        context.bezierCurveTo(190,190,134,306,230,359);
        context.bezierCurveTo(335,325,317,288,283,263);
    context.closePath();
    context.fillStyle = "#814905";
context.fill();
    context.strokeStyle = "black";
    
    context.lineWidth = 5;
    
    context.stroke();

 

 //face
context.beginPath();
      context.moveTo(384, 292);
      context.quadraticCurveTo(386,314,410,318);
      context.lineWidth = 5;

      context.strokeStyle = 'black';
      context.stroke(); 
context.beginPath();
      context.moveTo(473, 341);
      context.quadraticCurveTo(482,358,463,377);
      context.lineWidth = 5;

      context.strokeStyle = 'black';
      context.stroke();
context.beginPath();
      context.moveTo(436, 339);
      context.quadraticCurveTo(438,348,446,355);
      context.lineWidth = 5;

      context.strokeStyle = 'black';
      context.stroke();
context.beginPath();
      context.moveTo(434, 339);
      context.quadraticCurveTo(435,357,413,367);
      context.lineWidth = 5;

      context.strokeStyle = 'black';
      context.stroke();
context.beginPath();
      context.moveTo(229, 361);
      context.bezierCurveTo(241,471,431,502,413,367);
      context.lineWidth = 5;

     
      context.strokeStyle = 'black';
      context.stroke();
///eye1
context.beginPath();
      context.moveTo(319, 267);
      context.bezierCurveTo(355,223,370,272,353,278);
      context.lineWidth = 5;
context.fillStyle = "white";
context.fill();
     
      context.strokeStyle = 'black';
      context.stroke();
context.beginPath();
context.arc(343,258,8,0*Math.PI, 2*Math.PI,false);
context.lineWidth=5
context.fillStyle = 'rgba(0,0,0,1.00)';
context.fill();
context.strokeStyle="rgba(0,0,0,1)";
context.stroke();
///eye2
context.beginPath();
      context.moveTo(455, 252);
      context.bezierCurveTo(389,220,389,278,397,287);
 context.bezierCurveTo(385,272,431,331,455,252);
      context.lineWidth = 5;
context.fillStyle = "white";
context.fill();
     
      context.strokeStyle = 'black';
      context.stroke();
context.beginPath();
context.arc(417,253,9,0*Math.PI, 2*Math.PI,false);
context.lineWidth=5
context.fillStyle = 'rgba(0,0,0,1.00)';
context.fill();
context.strokeStyle="rgba(0,0,0,1)";
context.stroke();
///eyebrows
context.beginPath();
      context.moveTo(325, 228);
      context.quadraticCurveTo(338,240,367,239);
      context.lineWidth = 10;

      context.strokeStyle = "black";
      context.stroke();
context.beginPath();
      context.moveTo(393, 229);
      context.quadraticCurveTo(426,241,449,211);
      context.lineWidth = 10;

      context.strokeStyle = 'black';
      context.stroke();
context.beginPath();
      context.moveTo(249, 243);
      context.quadraticCurveTo(317,264,359,281);
      context.lineWidth = 7;

      context.strokeStyle = 'black';
      context.stroke(); 
//collar

context.beginPath();
      context.moveTo(213, 469);
      context.quadraticCurveTo(211,469,201,492);
      context.lineWidth = 5;

      context.strokeStyle = 'black';
      context.stroke(); 
context.beginPath();
      context.moveTo(212, 470);
      context.quadraticCurveTo(229,462,249,462);
      context.lineWidth = 5;

      
      context.strokeStyle = 'black';
      context.stroke(); 
context.beginPath();
      context.moveTo(200, 492);
      context.quadraticCurveTo(223,477,235,488);
      context.lineWidth = 5;

      
      context.strokeStyle = 'black';
      context.stroke(); 
context.beginPath();
      context.moveTo(193, 518);
      context.quadraticCurveTo(117,580,243,747);
      context.lineWidth = 5;

      
      context.strokeStyle = 'black';
      context.stroke(); 
context.beginPath();
      context.moveTo(235, 489);
      context.quadraticCurveTo(204,496,196,501);
      context.lineWidth = 5;

      
      context.strokeStyle = 'black';
      context.stroke();
context.beginPath();
      context.moveTo(196, 501);
      context.quadraticCurveTo(196,501,193,544);
      context.lineWidth = 5;

      
      context.strokeStyle = 'black';
      context.stroke();
context.beginPath();
      context.moveTo(193, 544);
      context.quadraticCurveTo(228,537,248,532);
      context.lineWidth = 5;

      
      context.strokeStyle = 'black';
      context.stroke();

context.beginPath();
      context.moveTo(248, 532);
      context.quadraticCurveTo(252,511,256,493);
      context.lineWidth = 5;

      
      context.strokeStyle = 'black';
      context.stroke();
context.beginPath();
      context.moveTo(242, 508);
      context.quadraticCurveTo(236,434,278,461);
      context.lineWidth = 5;

      
      context.strokeStyle = 'black';
      context.stroke();
context.beginPath();
      context.moveTo(242, 508);
      context.quadraticCurveTo(257,455,278,461);
      context.lineWidth = 5;

      
      context.strokeStyle = 'black';
      context.stroke();
context.beginPath();
      context.moveTo(250, 491);
      context.quadraticCurveTo(269,492,271,499);
      context.lineWidth = 5;

      
      context.strokeStyle = 'black';
      context.stroke();
context.beginPath();
      context.moveTo(277, 462);
      context.quadraticCurveTo(382,466,463,525);
      context.lineWidth = 5;

      
      context.strokeStyle = 'black';
      context.stroke();
context.beginPath();
      context.moveTo(423, 532);
      context.quadraticCurveTo(435,533,446,548);
      context.lineWidth = 5;

      
      context.strokeStyle = 'black';
      context.stroke();
context.beginPath();
      context.moveTo(463, 525);
      context.quadraticCurveTo(459,522,446,548);
      context.lineWidth = 5;

      
      context.strokeStyle = 'black';
 context.stroke();
//body
context.beginPath();
    
    context.moveTo(135,802);
    
context.lineTo(162, 801);
    context.lineTo(145, 760);
    
    context.closePath();
    
    context.stroke();
context.beginPath();
    
    context.moveTo(235,702);
    
context.lineTo(262, 701);
    context.lineTo(275, 760);
    
    context.closePath();
    
    context.stroke();
context.beginPath();
    
    context.moveTo(279,702);
    
context.lineTo(362, 651);
    context.lineTo(345, 690);
    
    context.closePath();
    
    context.stroke();
context.beginPath();
    
    context.moveTo(280,602);
    
context.lineTo(230, 601);
    context.lineTo(300, 660);
    
    context.closePath();
    
    context.stroke();
context.beginPath();
    
    context.moveTo(435,702);
    
context.lineTo(400, 701);
    context.lineTo(420, 660);
    
    context.closePath();
    
    context.stroke();
context.beginPath();
      context.moveTo(193, 518);
      context.quadraticCurveTo(117,580,243,747);
      context.lineWidth = 5;

      
      context.strokeStyle = 'black';
      context.stroke(); 
context.beginPath();
      context.moveTo(391, 588);
      context.quadraticCurveTo(399,610,397,660);
      context.lineWidth = 5;

      
      context.strokeStyle = 'black';
      context.stroke(); 
context.beginPath();
      context.moveTo(171, 790);
      context.quadraticCurveTo(168,680,217,711);
      context.lineWidth = 5;

      
      context.strokeStyle = 'black';
      context.stroke(); 
context.beginPath();
      context.moveTo(172, 754);
      context.quadraticCurveTo(146,676,126,737);
      context.lineWidth = 5;

      
      context.strokeStyle = 'black';
      context.stroke(); 
context.beginPath();
      context.moveTo(426,741 );
      context.quadraticCurveTo(251,792,142,835);
      context.lineWidth = 5;

      
      context.strokeStyle = 'black';
      context.stroke(); 
 
context.beginPath();
      context.moveTo(98,719 );
      context.quadraticCurveTo(53,786,142,835);
      context.lineWidth = 5;

      
      context.strokeStyle = 'black';
      context.stroke(); 
context.beginPath();
      context.moveTo(131, 724);
      context.bezierCurveTo(137,686,86,694,101,738);
      context.lineWidth = 5;

     
      context.strokeStyle = 'black';
      context.stroke();
context.beginPath();
      context.moveTo(426,742);
      context.quadraticCurveTo(427,782,496,739);
      context.lineWidth = 5;

      
      context.strokeStyle = 'black';
      context.stroke(); 
context.beginPath();
      context.moveTo(496,739);
      context.quadraticCurveTo(533,695,481,695);
      context.lineWidth = 5;

      
      context.strokeStyle = 'black';
      context.stroke(); 
context.beginPath();
      context.moveTo(484,676);
      context.quadraticCurveTo(513,672,503,700);
      context.lineWidth = 5;

      
      context.strokeStyle = 'black';
      context.stroke(); 
context.beginPath();
      context.moveTo(464,670);
      context.quadraticCurveTo(491,646,497,674);
      context.lineWidth = 5;

      
      context.strokeStyle = 'black';
      context.stroke(); 
context.beginPath();
      context.moveTo(371, 679);
      context.bezierCurveTo(407,656,480,603,457,700);
      context.lineWidth = 5;

     
      context.strokeStyle = 'black';
      context.stroke();
///arm1
context.beginPath();
      context.moveTo(132, 440);
      context.quadraticCurveTo(162,443,211,470);
      context.lineWidth = 5;

      
      context.strokeStyle = 'black';
      context.stroke(); 
context.beginPath();
      context.moveTo(120, 431);
      context.bezierCurveTo(118,457,148,436,128,406);
      context.lineWidth = 5

      context.strokeStyle = 'black';
      context.stroke();
context.beginPath();
      context.moveTo(100, 410);
      context.quadraticCurveTo(113,392,128,406);
      context.lineWidth = 5;

      
      context.strokeStyle = 'black';
      context.stroke(); 
context.beginPath();
      context.moveTo(86, 402);
      context.quadraticCurveTo(100,383,112,400);
      context.lineWidth = 5;

      
      context.strokeStyle = 'black';
      context.stroke(); 
context.beginPath();
      context.moveTo(97, 384);
      context.quadraticCurveTo(122,367,127,404);

      context.lineWidth = 5;

      
      context.strokeStyle = 'black';
      context.stroke(); 
context.beginPath();
      context.moveTo(100, 388);
      context.bezierCurveTo(64,364,-25,462,176,539);
      context.lineWidth = 5;


      context.strokeStyle = 'black';
      context.stroke();
///arm2
 context.beginPath();
      context.moveTo(369, 513);
      context.bezierCurveTo(466,512,411,587,391,588);
      context.lineWidth = 5;

     
      context.strokeStyle = 'black';
      context.stroke();
context.beginPath();
      context.moveTo(270, 502);
      context.quadraticCurveTo(278,636,393,588);
      context.lineWidth = 5;

      
      context.strokeStyle = 'black';
      context.stroke(); 
context.beginPath();
      context.moveTo(294, 485);
      context.quadraticCurveTo(276,488,270,502);
      context.lineWidth = 5;

      
      context.strokeStyle = 'black';
      context.stroke(); 
context.beginPath();
      context.moveTo(289, 500);
      context.quadraticCurveTo(299,466,317,486);
      context.lineWidth = 5;

      
      context.strokeStyle = 'black';
      context.stroke(); 
context.beginPath();
      context.moveTo(310, 495);
      context.quadraticCurveTo(320,476,350,493);
      context.lineWidth = 5;

      
      context.strokeStyle = 'black';
      context.stroke(); 
context.beginPath();
      context.moveTo(351, 492);
      context.quadraticCurveTo(342,498,343,512);
      context.lineWidth = 5;

      
      context.strokeStyle = 'black';
      context.stroke(); 
context.beginPath();
      context.moveTo(336, 499);
      context.quadraticCurveTo(330,515,355,514);
      context.lineWidth = 5;

      
      context.strokeStyle = 'black';
      context.stroke(); 
context.beginPath();
      context.moveTo(353, 514);
      context.quadraticCurveTo(369,533,342,535);
      context.lineWidth = 5;

      
      context.strokeStyle = 'black';
      context.stroke(); 
context.beginPath();
      context.moveTo(342, 535);
      context.quadraticCurveTo(354,536,356,546);
      context.lineWidth = 5;

      
      context.strokeStyle = 'black';
      context.stroke(); 
// <<<END HERE<<<END HERE<<<END HERE<<<END HERE<<<END HERE<<<END HERE 
///////////////////////////////////////////////////////////////////

// CREDITS

context.save();
var credits = "Michael Gunderson, Scrappy Doo Canvas Projext, FMX 210, FA/2020";
context.font = 'bold 12px Helvetica';
context.fillStyle = "rgba(0,0,0,1)"; // change the color here
context.shadowColor = "rgba(255,255,255,1)"; // change shadow color here
context.shadowBlur = 12;
context.shadowOffsetX = 2;
context.shadowOffsetY = 2;
context.fillText(credits, 10, canvas.height - 10); // CHANGE THE LOCATION HERE
context.restore();

//////////////////////////////////////////////////////////////////
// HTML DISPLAY FIELD FOR TESTING PURPOSES

display.innerHTML = Math.round(mouseX) + " || " + Math.round(mouseY) + " || counter = " + Math.round(counter);

/////////////////////////////////////////////////////////////////
// LAST LINE CREATES THE ANIMATION

requestAnimFrame(draw); // CALLS draw() every nth of a second

}

</script>

</body>
</html>

Comments

  1. Gabe NonkenNovember 18, 2020 at 11:54 AM

    I think this looks super impressive. Coding something with so many curves and shapes must have taken a lot of time but it looks just like scrappy doo. I like the colors and the gradient you used in the background but I would suggest filling in all of scrappy doo with brown so he stands out better. Still really nice and shows a lot of skill in Dreamweaver.

    ReplyDelete
  2. Eileen ClesiNovember 27, 2020 at 12:21 PM

    I also think you should fill in scrappy's body so he stands out more and it could give it like a 3D effect. I like how the curves came out in the background. Great job!

    ReplyDelete

Post a Comment

Popular posts from this blog

Gunderson-Somewhere

Image
 For this assignment, we were supposed to pick a picture or movie scene, take a picture of ourselves, and then make it look like we are in the specific scene using Adobe Photoshop. For this project, I chose to photoshop myself into the car scene from "Fear and Loathing in Las Vegas". I chose this movie because it is one of my all time favorites and I love a lot of different parts about it. I incorporated my tag logo into the shirt the man on the left is wearing, warping the image so that it looks like part of the shirt. Some hard parts about this project was using the stamp tool to get rid of the guy in the background as well as using different masking layers with different opacities to match the color of the original image and the brightness of the sun coming from the left. Overall, this project took about 3 hours, was fun to make, and I liked that I got to pick what scene I was able to put myself into. I think that it is really cool that with photoshop, you can make it look
Read more

InDesign Tutorials

 https://www.youtube.com/watch?v=ka2dh5wU6Es https://www.youtube.com/watch?v=mVW8AF2TMnw https://www.youtube.com/watch?v=iHDy_nEvgd4     After watching these three tutorials, I learned a lot about the program and its tools. Some of my favorite tools that I understand and would like to use are the type tool, the frame tool, the shape tool, and the page tool. All of these tools make it possible to make layouts with different texts and images. I think that these tools will be some of the most common ones that I use in my work.      I think that the hardest indesign tools that I may have to use are the scissors tool and the convert direction point tool. I think that these tools will be difficult for me to use because it is hard for me to understand when I would use them. I think that the scissor tool may be useful, but I don't think that I will have to use it in my assignments because I won't need to cut anything out of my pages. I think that the convert direction point tool was a
Read more

Gunderson Black and White to Color

Image
          In this project, we were to use Adobe Photoshop to convert a picture of ourselves into black and white. After converting our photo black and white, we were asked to add different colors to the picture, following three of the different color rules and using different selection and coloring techniques. The three color rules I chose to follow were monochromatic, triad, and square. I really liked the color combinations with my base color when I was checking out all of the different color rules, so I decided to pick these three. Overall, I really had a lot of fun making this project and I feel like it helped me learn more about arranging layers as well as masking things in photoshop. This project took me about four hours to complete and I am happy with how it came out. 
Read more