Nas Feratu, License to Kill (HTML5 CANVAS PROJECT)




Hours: 12 Est.

Nas Feratu is instinctually drawn to the blood dripping from 007's noise suppressed pistol. The only question is, "Does Bond have a silver bullet"?

My project is a blend of the iconic artwork for Nas Feratu (Dracula) and  the James Bond 007 movies. I was particularly drawn to the contrast of the curved lines from the gun barrel and dripping blood and the triangular overlapping shapes and jagged lines from Nas Feratu. One of the hardest parts in creating this was figuring out the layering order for the triangles.




<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ

//background!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
var x = 0;
var y = 0;
var width = canvas.width;
var height = canvas.height;
context.beginPath();
context.rect(x,y,width,height);
context.fillStyle = 'rgb(155, 155,155)';
context.fill();
context.lineWidth = 20;
context.strokeStyle = 'rgb(100,0,0)';
context.stroke();


// NAS FERATU!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!


// COAT!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
  
// Left top Colar & Right Jacket rear panel, Black
 //triangle
context.beginPath();
 context.moveTo(1400,500);
 context.lineTo(1160,1650);
 context.lineTo(450,1525);
 context.lineTo(1400,500);
 context.lineWidth=2;
 context.closePath();
 context.fillStyle = 'rgb(25,25,25)';
 context.fill();
 context.strokeStyle = 'rgb(25,25,25)'
 context.stroke();


// Back Left Panel, Gray
 //triangle
context.beginPath();
 context.moveTo(1040,625);
 context.lineTo(1700,710);
 context.lineTo(1675,1550);
 context.lineTo(1040,625);
 context.lineWidth=2;
 context.closePath();
 context.fillStyle = 'rgba(175,175,175,.5)';
 context.fill();
 context.strokeStyle = 'rgba(175,175,175,.5)'
 context.stroke();


// Left Breast, back panel, Black
 //triangle
context.beginPath();
 context.moveTo(1400,500);
 context.lineTo(1550,1550);
 context.lineTo(1135,1650);
 context.lineTo(1400,500);
 context.lineWidth=2;
 context.closePath();
 context.fillStyle = 'rgb(0,0,0)';
 context.fill();
 context.strokeStyle = 'rgb(0,0,0)'
 context.stroke();


// Left Arm
 //triangle
context.beginPath();
 context.moveTo(1350,675);
 context.lineTo(1620,1275);
 context.lineTo(1500,700);
 context.lineTo(1350,675);
 context.lineWidth=2;
 context.closePath();
 context.fillStyle = 'rgb(0,0,0)';
 context.fill();
 context.strokeStyle = 'rgb(0,0,0)'
 context.stroke();

// Left Sholder Panel Overlay,  Gray
 //triangle
context.beginPath();
 context.moveTo(1375,675);
 context.lineTo(1700,710);
 context.lineTo(1700,1225);
 context.lineTo(1375,675);
 context.lineWidth=2;
 context.closePath();
 context.fillStyle = 'rgb(100,100,100)';
 context.fill();
 context.strokeStyle = 'rgb(100,100,100)'
 context.stroke(); 


// Left Small Collar Back Panel, BLACK
 //triangle
context.beginPath();
 context.moveTo(1400,500);
 context.lineTo(1285,985);
 context.lineTo(1040,625);
 context.lineTo(1400,500);
 context.lineWidth=2;
 context.closePath();
 context.fillStyle = 'rgb(0,0,0)';
 context.fill();
 context.strokeStyle = 'rgb(0,0,0)'
 context.stroke(); 

 // Right Sholder Panel Overlay,  Gray
 //triangle
context.beginPath();
 context.moveTo(1400,500);
 context.lineTo(450,1525);
 context.lineTo(600,100);
 context.lineTo(1400,500);
 context.lineWidth=2;
 context.closePath();
 context.fillStyle = 'rgb(100,100,100)';
 context.fill();
 context.strokeStyle = 'rgb(100,100,100)'
 context.stroke();


//Color, Overlay Blocking, Gray
context.beginPath();
context.moveTo(1400,500);
context.lineTo(1830,740);
context.lineTo(1335,680); 
context.lineTo(1400,500);
context.lineWidth=5;
context.closePath();
context.fillStyle = 'rgb(190,190,190)';
context.fill();
context.strokeStyle = 'rgb(190,190,190)'
context.stroke(); 



// BUTTONS!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

//10 BUTTONS, White (Top to bottom Right, Top to bottom Left)

// Button 1, White
var centerX1 = 1350;
        var centerY1 = 1005;
        var radius1 = 10;
        var startangle1 = 0;
        var endangle1 = 2 * Math.PI;
        context.beginPath();
        context.arc(centerX1, centerY1, radius1, startangle1, endangle1, false);
        context.fillStyle = 'rgb(255,255,255)';
 context.fill();
 context.strokeStyle - 'rgb(0,0,0)'; 

// Button 2, White
var centerX1 = 1330;
        var centerY1 = 1080;
        var radius1 = 10;
        var startangle1 = 0;
        var endangle1 = 2 * Math.PI;
        context.beginPath();
        context.arc(centerX1, centerY1, radius1, startangle1, endangle1, false);
        context.fillStyle = 'rgb(255,255,255)';
 context.fill();
 context.strokeStyle - 'rgb(0,0,0)'; 

// Button 3, White
var centerX1 = 1310;
        var centerY1 = 1155;
        var radius1 = 10;
        var startangle1 = 0;
        var endangle1 = 2 * Math.PI;
        context.beginPath();
        context.arc(centerX1, centerY1, radius1, startangle1, endangle1, false);
        context.fillStyle = 'rgb(255,255,255)';
 context.fill();
 context.strokeStyle - 'rgb(0,0,0)'; 


// Button 4, White
var centerX1 = 1290;
        var centerY1 = 1230;
        var radius1 = 10;
        var startangle1 = 0;
        var endangle1 = 2 * Math.PI;
        context.beginPath();
        context.arc(centerX1, centerY1, radius1, startangle1, endangle1, false);
        context.fillStyle = 'rgb(255,255,255)';
 context.fill();
 context.strokeStyle - 'rgb(0,0,0)'; 

// Button 5, White
var centerX1 = 1270;
        var centerY1 = 1305;
        var radius1 = 10;
        var startangle1 = 0;
        var endangle1 = 2 * Math.PI;
        context.beginPath();
        context.arc(centerX1, centerY1, radius1, startangle1, endangle1, false);
        context.fillStyle = 'rgb(255,255,255)';
 context.fill();
 context.strokeStyle - 'rgb(0,0,0)'; 



// Button 6, White
var centerX1 = 1420;
        var centerY1 = 1075;
        var radius1 = 10;
        var startangle1 = 0;
        var endangle1 = 2 * Math.PI;
        context.beginPath();
        context.arc(centerX1, centerY1, radius1, startangle1, endangle1, false);
        context.fillStyle = 'rgb(255,255,255)';
 context.fill();
 context.strokeStyle - 'rgb(0,0,0)'; 

// Button 7, White
var centerX1 = 1400;
        var centerY1 = 1150;
        var radius1 = 10;
        var startangle1 = 0;
        var endangle1 = 2 * Math.PI;
        context.beginPath();
        context.arc(centerX1, centerY1, radius1, startangle1, endangle1, false);
        context.fillStyle = 'rgb(255,255,255)';
 context.fill();
 context.strokeStyle - 'rgb(0,0,0)'; 

// Button 8, White
var centerX1 = 1380;
        var centerY1 = 1225;
        var radius1 = 10;
        var startangle1 = 0;
        var endangle1 = 2 * Math.PI;
        context.beginPath();
        context.arc(centerX1, centerY1, radius1, startangle1, endangle1, false);
        context.fillStyle = 'rgb(255,255,255)';
 context.fill();
 context.strokeStyle - 'rgb(0,0,0)'; 


// Button 9, White
var centerX1 = 1360;
        var centerY1 = 1300;
        var radius1 = 10;
        var startangle1 = 0;
        var endangle1 = 2 * Math.PI;
        context.beginPath();
        context.arc(centerX1, centerY1, radius1, startangle1, endangle1, false);
        context.fillStyle = 'rgb(255,255,255)';
 context.fill();
 context.strokeStyle - 'rgb(0,0,0)'; 

// Button 10, White
var centerX1 = 1340;
        var centerY1 = 1375;
        var radius1 = 10;
        var startangle1 = 0;
        var endangle1 = 2 * Math.PI;
        context.beginPath();
        context.arc(centerX1, centerY1, radius1, startangle1, endangle1, false);
        context.fillStyle = 'rgb(255,255,255)';
 context.fill();
 context.strokeStyle - 'rgb(0,0,0)';  



//HEAD!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
 
// CHIN Background, Gray
 //triangle
context.beginPath();
 context.moveTo(1340,665);
 context.lineTo(1300,930);
 context.lineTo(1175,650);
 context.lineTo(1340,665);
 context.lineWidth=2;
 context.closePath();
 context.fillStyle = 'rgb(100,100,100)';
 context.fill();
 context.strokeStyle = 'rgb(150,150,150)'
 context.stroke(); 

// Nose Overlay, White
 //triangle
context.beginPath();
 context.moveTo(1310,645);
 context.lineTo(1385,830);
 context.lineTo(1100,610);
 context.lineTo(1300,655);
 context.lineWidth=5;
 context.closePath();
 context.fillStyle = 'rgb(255,255,255)';
 context.fill();
 context.strokeStyle = 'rgb(0,0,0)'
 context.stroke();




 // Nose Overlay, White
 //triangle
context.beginPath();
 context.moveTo(1260,500);
 context.lineTo(1385,830);
 context.lineTo(1185,680);
 context.lineTo(1160,625);
 context.lineTo(1260,500);
 context.lineWidth=5;
 context.closePath();
 context.fillStyle = 'rgb(255,255,255)';
 context.fill();
 context.strokeStyle = 'rgb(0,0,0)'
 context.stroke();


// Cheek Bone, White
 //triangle
context.beginPath();
 context.moveTo(1165,640);
 context.lineTo(1330,700);
 context.lineTo(1255,825);
 context.lineTo(1160,625);
 context.lineWidth=5;
 context.closePath();
 context.fillStyle = 'rgb(255,255,255)';
 context.fill();
 context.strokeStyle = 'rgb(255,255,25555)'
 context.stroke();  

// MOUTH, BLACK CIRLE
var centerX1 = 1318;
        var centerY1 = 848;
        var radius1 = 30;
        var startangle1 = 0;
        var endangle1 = 2 * Math.PI;
        context.beginPath();
        context.arc(centerX1, centerY1, radius1, startangle1, endangle1, false);
        context.fillStyle = 'rgb(0,0,0)';
 context.fill();
 context.strokeStyle - 'rgb(0,0,0)';

// TOOTH, White
context.beginPath();
 context.moveTo(1313,822);
 context.lineTo(1308,850);
 context.lineTo(1300,830);
 context.lineWidth = 1;
 context.closePath();
 context.fillStyle = 'rgb(255,255,255)';
 context.fill();
 context.strokeStyle = 'rgb(0,0,0)';
 context.stroke();




// EYE!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

// Eye, Outer, Black
var centerX1 = 1260;
        var centerY1 = 635;
        var radius1 = 48;
        var startangle1 = 0;
        var endangle1 = 2 * Math.PI;
        context.beginPath();
        context.arc(centerX1, centerY1, radius1, startangle1, endangle1, false);
        context.fillStyle = 'rgb(0,0,0)';
 context.fill();
 context.strokeStyle - 'rgb(0,0,0)';
// Eye, Inner, White
var centerX1 = 1258;
        var centerY1 = 634;
        var radius1 = 44;
        var startangle1 = 0;
        var endangle1 = 2 * Math.PI;
        context.beginPath();
        context.arc(centerX1, centerY1, radius1, startangle1, endangle1, false);
        context.fillStyle = 'rgb(255,255,255)';
 context.fill();
 context.strokeStyle - 'rgb(0,0,0)';

// Eye, Pupil, Black
var centerX1 = 1255;
        var centerY1 = 658;
        var radius1 = 10;
        var startangle1 = 0;
        var endangle1 = 2 * Math.PI;
        context.beginPath();
        context.arc(centerX1, centerY1, radius1, startangle1, endangle1, false);
        context.fillStyle = 'rgb(0,0,0)';
 context.fill();
 context.strokeStyle - 'rgb(0,0,0)'; 



// FOREHEAD (QUADRATIC CURVE & enlosed shape)!!!!!!!!!!!!!

// starting point coordinates
var startX = 1162;
var startY = 621;
// control point 1 coordinates ( magnet )
var cpointX1 = 1080;
var cpointY1 = 490;
// control point 2 coordinates ( magnet )
var cpointX2 = 1360;
var cpointY2 = 250;
// ending point coordinates
var endX = 1340;
var endY = 665;
context.beginPath();
context.moveTo(startX, startY);
context.lineTo(1130,570);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY, startX, startY);
context.lineWidth = 5;
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.closePath();
context.strokeStyle = "rgb(0,0,0)";
context.stroke();


//Forehead Stripe (Black, above eye)
context.beginPath();
context.moveTo(1160,620);
context.lineTo(1152,600);
context.lineTo(1322,658);
context.lineTo(1155,620);
context.lineWidth=5;
context.closePath();
context.fillStyle = 'rgb(0,0,0)';
context.fill();
context.strokeStyle = 'rgb(0,0,0)'
context.stroke();




// RIGHT HAND!!!!!!!!!!!!!!!!!!!!!!

// Right Hand, Top, White
 //triangle
context.beginPath();
 context.moveTo(1217,1300);
 context.lineTo(1245,1335);
 context.lineTo(1205,1350);
 context.lineTo(1217,1300);
 context.lineWidth=2;
 context.closePath();
 context.fillStyle = 'rgb(255,255,255)';
 context.fill();
 context.strokeStyle = 'rgb(255,255,255)'
 context.stroke();

// Right Thumb, White
 //triangle
context.beginPath();
 context.moveTo(1245,1335);
 context.lineTo(1250,1375);
 context.lineTo(1240,1365);
 context.lineTo(1242,1355);
 context.lineTo(1215,1315);
 context.lineTo(1245,1335);
 context.lineWidth=2;
 context.closePath();
 context.fillStyle = 'rgb(255,255,255)';
 context.fill();
 context.strokeStyle = 'rgb(255,255,255)'
 context.stroke();


// Right Middle Finger, Gray
context.beginPath();
 context.moveTo(1200,1360);
 context.lineTo(1190,1410);
 context.lineTo(1235,1450);
 context.lineTo(1205,1405);
 context.lineTo(1215,1350);
 context.lineWidth = 2;
 context.closePath();
 context.fillStyle = 'rgb(155,155,155)';
 context.fill();
 context.strokeStyle = 'rgb(155,155,155)';
 context.stroke();


// Right Ring Finger, Gray
context.beginPath();
 context.moveTo(1210,1360);
 context.lineTo(1220,1410);
 context.lineTo(1280,1415);
 context.lineTo(1230,1400);
 context.lineTo(1225,1350);
 context.lineWidth = 2;
 context.closePath();
 context.fillStyle = 'rgb(155,155,155)';
 context.fill();
 context.strokeStyle = 'rgb(155,155,155)';
 context.stroke;


// Right Ring Finger, Gray
context.beginPath();
 context.moveTo(1215,1380);
 context.lineTo(1255,1395);
 context.lineTo(1280,1360);
 context.lineTo(1253,1385);
 context.lineTo(1215,1365);
 context.lineWidth = 2;
 context.closePath();
 context.fillStyle = 'rgb(155,155,155)';
 context.fill();
 context.strokeStyle = 'rgb(155,155,155)';
 context.stroke;



// Right Index Finger, White
context.beginPath();
 context.moveTo(1230,1325);
 context.lineTo(1225,1360);
 context.lineTo(1180,1375);
 context.lineTo(1165,1435);
 context.lineTo(1170,1365);
 context.lineTo(1205,1350);
 context.lineTo(1230,1325);
 context.lineWidth = 2;
 context.closePath();
 context.fillStyle = 'rgb(255,255,255)';
 context.fill();
 context.strokeStyle = 'rgb(255,255,255)';
 context.stroke();


// LEFT HAND

// LEFT THUMB, White
context.beginPath();
 context.moveTo(1600,1180);
 context.lineTo(1565,1240);
 context.lineTo(1570,1280);
 context.lineTo(1580,1260);
 context.lineTo(1575,1245);
 context.lineTo(1600,1200);
 context.lineWidth = 2;
 context.closePath();
 context.fillStyle = 'rgb(255,255,255)';
 context.fill();
 context.strokeStyle = 'rgb(255,255,255)';
 context.stroke();


// LEFT MIDDLE FINGER, Dark Gray
context.beginPath();
 context.moveTo(1625,1275);
 context.lineTo(1640,1350);
 context.lineTo(1570,1410);
 context.lineTo(1625,1340);
 context.lineTo(1610,1285);
 context.lineWidth = 2;
 context.closePath();
 context.fillStyle = 'rgb(055,055,055)';
 context.fill();
 context.strokeStyle = 'rgb(055,055,055)';
 context.stroke();


// LEFT RING FINGER, Dark Gray
context.beginPath();
 context.moveTo(1610,1270);
 context.lineTo(1610,1340);
 context.lineTo(1535,1350);
 context.lineTo(1595,1330);
 context.lineTo(1595,1270);
 context.lineWidth = 2;
 context.closePath();
 context.fillStyle = 'rgb(055,055,055)';
 context.fill();
 context.strokeStyle = 'rgb(055,055,055)';
 context.fill();

// LEFT PINKY FINGER, DARK GRAY
context.beginPath();
 context.moveTo(1605,1300);
 context.lineTo(1565,1310);
 context.lineTo(1535,1280);
 context.lineTo(1565,1295);
 context.lineTo(1595,1290);
 context.lineWidth = 2;
 context.closePath();
 context.fillStyle = 'rgb(055,055,055)';
 context.fill();
 context.strokeStyle = 'rgb(055,055,055)';
 context.stroke();


// LEFT INDEX FINGER, White
context.beginPath();
 context.moveTo(1600,1180);
 context.lineTo(1620,1270);
 context.lineTo(1670,1290);
 context.lineTo(1655,1390);
 context.lineTo(1655,1300);
 context.lineTo(1595,1280);
 context.lineTo(1585,1220);
 context.lineWidth = 2;
 context.closePath();
 context.fillStyle = 'rgb(255,255,255)';
 context.fill();
 context.strokeStyle = 'rgb(255,255,255)';
 context.stroke();


//GUN BARRELL!!!!!!!!!!!!!!!!!!!!!

// GUN BARREL, BACKGROUND CIRCLE
  var x = 1250;
      var y = 1000;
      var radius = 1100;
      var startAngle = 0 * Math.PI;
      var endAngle = 2.0 * Math.PI;
      var counterClockwise = false;
      context.beginPath();
      context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
      context.lineWidth = 975;
      // line color
      context.strokeStyle = 'black';
      context.stroke();



// GUN BARREL, 1, TOP
  var x = 1250;
      var y = 1000;
      var radius = 600;
      var startAngle = 1.0 * Math.PI;
      var endAngle = 2.0 * Math.PI;
      var counterClockwise = false;
      context.beginPath();
      context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
 context.quadraticCurveTo(2150,250,1250,-250);
      context.lineWidth = 25;
      // line color
      context.strokeStyle = 'white';
      context.stroke();



// GUN BARREL, 2, BOTTOM
  var x = 1250;
      var y = 1000;
      var radius = 600;
      var startAngle = 0 * Math.PI;
      var endAngle = 1.0 * Math.PI;
      var counterClockwise = false;
      context.beginPath();
      context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
 context.quadraticCurveTo(350,1750,1250,2250);
      context.lineWidth = 25;
      // line color
      context.strokeStyle = 'white';
      context.stroke();  


// GUN BARREL, 3, RIGHT
  var x = 1250;
      var y = 1000;
      var radius = 600;
      var startAngle = 1.5 * Math.PI;
      var endAngle = 0.5 * Math.PI;
      var counterClockwise = false;
      context.beginPath();
      context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
 context.quadraticCurveTo(2150,1750,2500,1000);
      context.lineWidth = 25;
      // line color
      context.strokeStyle = 'white';
      context.stroke();



// GUN BARREL, 4, LEFT
  var x = 1250;
      var y = 1000;
      var radius = 600;
      var startAngle = 0.5 * Math.PI;
      var endAngle = 1.5 * Math.PI;
      var counterClockwise = false;
      context.beginPath();
      context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
 context.quadraticCurveTo(350,250,0,1000);
      context.lineWidth = 25;
      // line color
      context.strokeStyle = 'white';
      context.stroke(); 


// GUN BARREL, 5, TOP RIGHT
  var x = 1250;
      var y = 1000;
      var radius = 600;
      var startAngle = 1.25 * Math.PI;
      var endAngle = 0.25 * Math.PI;
      var counterClockwise = false;
      context.beginPath();
      context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
 context.quadraticCurveTo(2150,1250,2500,0);
      context.lineWidth = 25;
      // line color
      context.strokeStyle = 'white';
      context.stroke();


// GUN BARREL, 6, BOTTOM LEFT
  var x = 1250;
      var y = 1000;
      var radius = 600;
      var startAngle = 0.25 * Math.PI;
      var endAngle = 1.25 * Math.PI;
      var counterClockwise = false;
      context.beginPath();
      context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
 context.quadraticCurveTo(350,750,0,2000);
      context.lineWidth = 25;
      // line color
      context.strokeStyle = 'white';
      context.stroke();


// GUN BARREL, 7, BOTTOM RIGHT
  var x = 1250;
      var y = 1000;
      var radius = 600;
      var startAngle = 1.75 * Math.PI;
      var endAngle = 0.75 * Math.PI;
      var counterClockwise = false;
      context.beginPath();
      context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
 context.quadraticCurveTo(1000,1750,2500,2000);
      context.lineWidth = 25;
      // line color
      context.strokeStyle = 'white';
      context.stroke(); 


// GUN BARREL, 8, TOP LEFT
  var x = 1250;
      var y = 1000;
      var radius = 600;
      var startAngle = 0.75 * Math.PI;
      var endAngle = 1.75 * Math.PI;
      var counterClockwise = false;
      context.beginPath();
      context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
 context.quadraticCurveTo(1000,0,0,0);
      context.lineWidth = 25;
      // line color
      context.strokeStyle = 'white';
      context.stroke(); 



// BLOOD DRIP!!!!!!!!!!!!!!!!!!!!!!!

// BLOOD DRIP CENTER

context.beginPath();
 context.moveTo(1325,-50);
 context.bezierCurveTo(1300,700,1600,700,1550,-50);
 context.lineWidth = 20;
 context.closePath();
 context.fillStyle = 'rgb(155,0,0)';
 context.fill();
 context.strokeStyle = 'rgb(255,0,00)';
 context.stroke();

// BLOOD DRIP Left of CENTER, BIG

context.beginPath();
 context.moveTo(800,-50);
 context.lineTo(800,800);
 context.bezierCurveTo(750,1500,1050,1600,1025,800);
 context.lineTo(1000,-50);
 context.lineWidth = 20;
 context.closePath();
 context.fillStyle = 'rgb(155,0,0)';
 context.fill();
 context.strokeStyle = 'rgb(255,0,00)';
 context.stroke();

// BLOOD DRIP Left of CENTER, SMALL

context.beginPath();
 context.moveTo(500,-50);
 context.lineTo(500,300);
 context.bezierCurveTo(475,450,650,500,600,150);
 context.lineTo(620,-50);
 context.lineWidth = 20;
 context.closePath();
 context.fillStyle = 'rgb(155,0,0)';
 context.fill();
 context.strokeStyle = 'rgb(255,0,00)';
 context.stroke();


// BLOOD DRIP Left of CENTER, SMALL

context.beginPath();
 context.moveTo(50,-50);
 context.lineTo(55,300);
 context.bezierCurveTo(0,750,200,1000,200,500);
 context.lineTo(175,-50);
 context.lineWidth = 20;
 context.closePath();
 context.fillStyle = 'rgb(155,0,0)';
 context.fill();
 context.strokeStyle = 'rgb(255,0,00)';
 context.stroke(); 


////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="2500" height="2000"></canvas>
</body>
</html>

Comments

Post a Comment

Popular posts from this blog

A10_Meme - UPDATED!

Image
"MEME" There's nothing like finding just the right Meme to express how you feel. My meme is pretty cliché, but relatable to anyone taking classes in the CASS bldg. It's tucked away in the corner of the University next to the tracks & the river, and far away from all the other comings and goings of the school (including the commuter parking lot). The CASS is so hidden, that you can't even see it when your standing on top (5th floor) of the parking structure. It's also a very cold and dark place where suntans and dreams go to die... Not because you find discouragement there, but because you will never sleep again. I need to learn how to day dream again like I did as a child... And the bonus one... 10 FAVORITE MEMES:
Read more

P11_Cinemagraph - UPDATED!

Image
"HAND TAPPED" In April 2016, I traveled to American Samoa as part of the Marine Corps Forces Pacific Band to participate in their Flag Day Ceremony and surrounding events. This annual ceremony attracts quite a bit of attention, leaving no vacancies at any of the hotels on island. Fortunately, we were honored guests and made our reservations well ahead of time. What I had not planned on, was getting a Tattoo. Wilson is an Internationally known Tattoo Artist from American Samoa. I'm pretty sure he has more to his name than just "Wilson", but that's what he calls himself, and that's what everyone knows him as. While I had some "Liberty" on the island, I scheduled a session with the master. It was quite a bit different than other tattoo sessions I've had. Tattoos are a big deal in American Samoa. It's common for children to start getting "inked up" at around age 16. The culture is quite a bit different there, than that o
Read more