API tools faq
paste
Advertisement
Guest User

drawFigures.js

a guest
May 1st, 2013
272
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 7.27 KB | None | 0 0
raw download clone embed print report
  1. var canvas = document.getElementById("drawingCanvas");
  2. var ctx = canvas.getContext("2d");
  3.  
  4. function drawHead() {
  5.     // head form
  6.     ctx.beginPath();
  7.     ctx.arc(100, 200, 70, 0, Math.PI * 2, false);
  8.     ctx.fillStyle = "#90cad7";
  9.     ctx.fill();
  10.     ctx.lineWidth = 2;
  11.     ctx.strokeStyle = "#1b4d58";
  12.     ctx.stroke();
  13.     ctx.closePath();
  14.  
  15.     // hat surface
  16.     ctx.save();
  17.     ctx.scale(1, 0.2);
  18.     ctx.beginPath();
  19.     ctx.arc(100, 680, 80, 0, Math.PI * 2, false);
  20.     ctx.fillStyle = "#396693";
  21.     ctx.fill();
  22.     ctx.restore();
  23.     ctx.lineWidth = 2;
  24.     ctx.strokeStyle = "#272523";
  25.     ctx.stroke();
  26.     ctx.restore();
  27.     ctx.closePath();
  28.  
  29.     // hat top
  30.     ctx.save();
  31.     ctx.scale(1, 0.35);
  32.     ctx.beginPath();
  33.     ctx.arc(100, 110, 45, 0, Math.PI * 2, false);
  34.     ctx.fillStyle = "#396693";
  35.     ctx.fill();
  36.     ctx.restore();
  37.     ctx.lineWidth = 2;
  38.     ctx.strokeStyle = "#272523";
  39.     ctx.stroke();
  40.     ctx.restore();
  41.     ctx.closePath();
  42.  
  43.     // hat bottom
  44.     ctx.save();
  45.     ctx.scale(1, 0.35);
  46.     ctx.beginPath();
  47.     ctx.arc(100, 350, 45, 0, Math.PI, false);
  48.     ctx.restore();
  49.     ctx.lineWidth = 2;
  50.     ctx.strokeStyle = "#272523";
  51.     ctx.stroke();
  52.     ctx.restore();
  53.     ctx.closePath();
  54.  
  55.     // hat front
  56.     ctx.beginPath();
  57.     ctx.moveTo(55, 40);
  58.     ctx.lineTo(55, 125);
  59.     ctx.lineWidth = 2;
  60.     ctx.strokeStyle = "#272523";
  61.     ctx.stroke();
  62.  
  63.     // hat fill
  64.     ctx.moveTo(145, 40);
  65.     ctx.lineTo(145, 125);
  66.     ctx.lineWidth = 2;
  67.     ctx.strokeStyle = "#272523";
  68.     ctx.stroke();
  69.     ctx.fillStyle = "#396693";
  70.     ctx.fillRect(56, 41, 88, 83);
  71.     ctx.closePath();
  72.  
  73.     // hat top fix
  74.     ctx.save();
  75.     ctx.scale(1, 0.35);
  76.     ctx.beginPath();
  77.     ctx.arc(100, 110, 45, 0, Math.PI, false);
  78.     ctx.fillStyle = "#396693";
  79.     ctx.fill();
  80.     ctx.restore();
  81.     ctx.lineWidth = 2;
  82.     ctx.strokeStyle = "#272523";
  83.     ctx.stroke();
  84.     ctx.restore();
  85.     ctx.closePath();
  86.  
  87.     // left eye
  88.     ctx.save();
  89.     ctx.scale(1, 0.65);
  90.     ctx.beginPath();
  91.     ctx.arc(58, 265, 13, 0, Math.PI * 2, false);
  92.     ctx.fillStyle = "#90cad7";
  93.     ctx.fill();
  94.     ctx.restore();
  95.     ctx.lineWidth = 2;
  96.     ctx.strokeStyle = "#1c4d58";
  97.     ctx.stroke();
  98.     ctx.restore();
  99.     ctx.closePath();
  100.  
  101.     // inner part of left eye
  102.     ctx.save();
  103.     ctx.scale(0.6, 1);
  104.     ctx.beginPath();
  105.     ctx.arc(88, 172, 7, 0, Math.PI * 2, false);
  106.     ctx.fillStyle = "#1c4d58";
  107.     ctx.fill();
  108.     ctx.restore();
  109.     ctx.closePath();
  110.  
  111.     // right eye
  112.     ctx.save();
  113.     ctx.scale(1, 0.65);
  114.     ctx.beginPath();
  115.     ctx.arc(115, 265, 13, 0, Math.PI * 2, false);
  116.     ctx.fillStyle = "#90cad7";
  117.     ctx.fill();
  118.     ctx.restore();
  119.     ctx.lineWidth = 2;
  120.     ctx.strokeStyle = "#1c4d58";
  121.     ctx.stroke();
  122.     ctx.restore();
  123.     ctx.closePath();
  124.  
  125.     // inner part of right eye
  126.     ctx.save();
  127.     ctx.scale(0.6, 1);
  128.     ctx.beginPath();
  129.     ctx.arc(183, 172, 7, 0, Math.PI * 2, false);
  130.     ctx.fillStyle = "#1c4d58";
  131.     ctx.fill();
  132.     ctx.restore();
  133.     ctx.closePath();
  134.  
  135.     // nose
  136.     ctx.beginPath();
  137.     ctx.lineWidth = 2;
  138.     ctx.strokeStyle = "#1c4d58";
  139.     ctx.moveTo(85, 175);
  140.     ctx.lineTo(70, 205);
  141.     ctx.lineTo(83, 205);
  142.     ctx.stroke();
  143.     ctx.closePath();
  144.  
  145.     // mouth
  146.     ctx.save();
  147.     ctx.beginPath();
  148.     ctx.setTransform(1, 0.1, 0, 0.3, 0, 0);
  149.     ctx.arc(85, 758, 30, 0, Math.PI * 2, false);
  150.     ctx.fillStyle = "#90cad7";
  151.     ctx.fill();
  152.     ctx.lineWidth = 3;
  153.     ctx.strokeStyle = "#1c4d58";
  154.     ctx.stroke();
  155.     ctx.closePath();
  156.     ctx.restore();
  157. }
  158.  
  159. function drawBike() {
  160.     // left wheel
  161.     ctx.beginPath();
  162.     ctx.arc(100, 500, 70, 0, Math.PI * 2, false);
  163.     ctx.fillStyle = "#90cad7";
  164.     ctx.fill();
  165.     ctx.lineWidth = 2;
  166.     ctx.strokeStyle = "#1b4d58";
  167.     ctx.stroke();
  168.     ctx.closePath();
  169.  
  170.     // right wheel
  171.     ctx.beginPath();
  172.     ctx.arc(410, 500, 70, 0, Math.PI * 2, false);
  173.     ctx.fillStyle = "#90cad7";
  174.     ctx.fill();
  175.     ctx.lineWidth = 2;
  176.     ctx.strokeStyle = "#1b4d58";
  177.     ctx.stroke();
  178.     ctx.closePath();
  179.  
  180.     // main frame
  181.     ctx.beginPath();
  182.     ctx.moveTo(100, 500);
  183.     ctx.lineTo(240, 497);
  184.     ctx.lineTo(387, 410);
  185.     ctx.lineTo(192, 410);
  186.     ctx.lineTo(100, 500);
  187.     ctx.stroke();
  188.     ctx.closePath();
  189.  
  190.     // draw pedals
  191.     ctx.beginPath();
  192.     ctx.arc(240, 497, 20, 0, Math.PI * 2, false);
  193.     ctx.stroke();
  194.     ctx.moveTo(225, 485);
  195.     ctx.lineTo(208, 471);
  196.     ctx.moveTo(255, 508);
  197.     ctx.lineTo(273, 523);
  198.     ctx.stroke();
  199.     ctx.closePath();
  200.  
  201.     // draw seat
  202.     ctx.beginPath();
  203.     ctx.moveTo(240, 497);
  204.     ctx.lineTo(160, 362);
  205.     ctx.moveTo(130, 362);
  206.     ctx.lineTo(192, 362);
  207.     ctx.stroke();
  208.     ctx.closePath();
  209.  
  210.     // draw fron frame
  211.     ctx.beginPath();
  212.     ctx.moveTo(410, 500);
  213.     ctx.lineTo(375, 350);
  214.     ctx.lineTo(305, 380);
  215.     ctx.moveTo(375, 350);
  216.     ctx.lineTo(405, 285);
  217.     ctx.stroke();
  218.     ctx.closePath();
  219. }
  220.  
  221. function drawHouse() {
  222.     // walls
  223.     ctx.beginPath();
  224.     ctx.lineWidth = 2;
  225.     ctx.fillStyle = "#975b5b";
  226.     ctx.strokeStyle = "#000000";
  227.     ctx.fillRect(700, 270, 305, 230);
  228.     ctx.strokeRect(700, 270, 305, 230);
  229.     ctx.closePath();
  230.  
  231.     // roof
  232.     ctx.beginPath();
  233.     ctx.lineWidth = 4;
  234.     ctx.moveTo(700, 270);
  235.     ctx.lineTo(852, 105);
  236.     ctx.lineTo(1003, 270);
  237.     ctx.lineTo(700, 270);
  238.     ctx.stroke();
  239.     ctx.fill();
  240.     ctx.closePath();
  241.  
  242.     // windows
  243.     // window 1
  244.     ctx.beginPath();
  245.     ctx.fillStyle = "#000000";
  246.     ctx.strokeStyle = "#975b5b";
  247.     ctx.lineWidth = 4;
  248.     ctx.fillRect(720, 295, 105, 70);
  249.     ctx.moveTo(772, 295);
  250.     ctx.lineTo(772, 365);
  251.     ctx.moveTo(720, 330);
  252.     ctx.lineTo(825, 330);
  253.     ctx.stroke();
  254.     ctx.closePath();
  255.  
  256.     // window 2
  257.     ctx.beginPath();
  258.     ctx.fillRect(870, 295, 105, 70);
  259.     ctx.moveTo(922, 295);
  260.     ctx.lineTo(922, 365);
  261.     ctx.moveTo(870, 330);
  262.     ctx.lineTo(975, 330);
  263.     ctx.stroke();
  264.     ctx.closePath();
  265.  
  266.     // window 3
  267.     ctx.beginPath();
  268.     ctx.fillRect(870, 395, 105, 70);
  269.     ctx.moveTo(922, 395);
  270.     ctx.lineTo(922, 465);
  271.     ctx.moveTo(870, 430);
  272.     ctx.lineTo(975, 430);
  273.     ctx.stroke();
  274.     ctx.closePath();
  275.  
  276.     // door
  277.     ctx.beginPath();
  278.     ctx.strokeStyle = "#000000";
  279.     ctx.fillStyle = "#975b5b";
  280.     ctx.lineWidth = 2;
  281.     ctx.save();
  282.     ctx.scale(1, 0.6);
  283.     ctx.arc(773, 696, 40, Math.PI + 0.1, Math.PI * 2 - 0.1, false);
  284.     ctx.restore();
  285.     ctx.moveTo(733, 415);
  286.     ctx.lineTo(733, 501);
  287.     ctx.moveTo(813, 415);
  288.     ctx.lineTo(813, 501);
  289.     ctx.moveTo(773, 395);
  290.     ctx.lineTo(773, 501);
  291.     ctx.stroke();
  292.     ctx.closePath();
  293.  
  294.     // left doorknob
  295.     ctx.beginPath();
  296.     ctx.arc(760, 465, 5, 0, Math.PI * 2, false);
  297.     ctx.stroke();
  298.     ctx.closePath();
  299.  
  300.     // right doorknob
  301.     ctx.beginPath();
  302.     ctx.arc(785, 465, 5, 0, Math.PI * 2, false);
  303.     ctx.stroke();
  304.     ctx.closePath();
  305.  
  306.     // chimney
  307.     ctx.fillRect(925, 150, 30, 85);
  308.     ctx.fill();
  309.     ctx.moveTo(925, 149);
  310.     ctx.lineTo(925, 235);
  311.     ctx.moveTo(955, 149);
  312.     ctx.lineTo(955, 235);
  313.     ctx.save();
  314.     ctx.scale(1, 0.3);
  315.     ctx.arc(940, 491, 15, 0, Math.PI * 2, false);
  316.     ctx.restore();
  317.     ctx.fill();
  318.     ctx.stroke();
  319. }
  320.  
  321. drawHead();
  322. drawBike();
  323. drawHouse();
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!