Giter VIP home page Giter VIP logo

gordon_freeman_on_canvas_of_pixels's Introduction

Gordon_Freeman_on_canvas_of_pixels

🕵🏻‍Images

Original

Result

Code

JavaScript

console.log(canvas);

var ctx = canvas.getContext('2d');

ctx.fillStyle = 'rgb(114, 52, 34)';

ctx.beginPath();
ctx.moveTo(140, 10);
ctx.lineTo(140, 20);
ctx.lineTo(130, 20);
ctx.lineTo(130, 30);
ctx.lineTo(120, 30);
ctx.lineTo(120, 40);
ctx.lineTo(110, 40);
ctx.lineTo(110, 90);
ctx.lineTo(140, 90);
ctx.lineTo(140, 70);
ctx.lineTo(150, 70);
ctx.lineTo(150, 60);
ctx.lineTo(160, 60);
ctx.lineTo(160, 50);
ctx.lineTo(240, 50);
ctx.lineTo(240, 60);
ctx.lineTo(250, 60);
ctx.lineTo(250, 80);
ctx.lineTo(260, 80);
ctx.lineTo(260, 40);
ctx.lineTo(250, 40);
ctx.lineTo(250, 30);
ctx.lineTo(240, 30);
ctx.lineTo(240, 20);
ctx.lineTo(220, 20);
ctx.lineTo(220, 10);
ctx.lineTo(130, 10);
ctx.fill();

ctx.fillStyle = 'rgb(114, 52, 34)';

ctx.beginPath();
ctx.moveTo(130, 100);
ctx.lineTo(120, 100);
ctx.lineTo(120, 140);
ctx.lineTo(110, 140);
ctx.lineTo(110, 160);
ctx.lineTo(120, 160);
ctx.lineTo(120, 170);
ctx.lineTo(130, 170);
ctx.lineTo(130, 180);
ctx.lineTo(170, 180);
ctx.lineTo(170, 190);
ctx.lineTo(230, 190);
ctx.lineTo(230, 180);
ctx.lineTo(250, 180);
ctx.lineTo(250, 170);
ctx.lineTo(260, 170);
ctx.lineTo(260, 130);
ctx.lineTo(250, 130);
ctx.lineTo(250, 150);
ctx.lineTo(240, 150);
ctx.lineTo(240, 140);
ctx.lineTo(170, 140);
ctx.lineTo(170, 150);
ctx.lineTo(150, 150);
ctx.lineTo(150, 140);
ctx.lineTo(140, 140);
ctx.lineTo(140, 120);
ctx.lineTo(130, 120);
ctx.lineTo(130, 100);
ctx.fill();

ctx.fillStyle = 'rgb(239, 164, 127)';

ctx.beginPath();
ctx.moveTo(200, 150);
ctx.lineTo(200, 160);
ctx.lineTo(230, 160);
ctx.lineTo(230, 150);
ctx.lineTo(200, 150);
ctx.fill();

ctx.fillStyle = 'rgb(239, 164, 127)';

ctx.beginPath();
ctx.moveTo(90, 100);
ctx.lineTo(90, 130);
ctx.lineTo(100, 130);
ctx.lineTo(100, 140);
ctx.lineTo(120, 140);
ctx.lineTo(120, 100);
ctx.lineTo(90, 100);
ctx.fill();

ctx.fillStyle = 'rgb(239, 164, 127)';

ctx.beginPath();
ctx.moveTo(160, 50);
ctx.lineTo(160, 60);
ctx.lineTo(150, 60);
ctx.lineTo(150, 70);
ctx.lineTo(140, 70);
ctx.lineTo(140, 90);
ctx.lineTo(160, 90);
ctx.lineTo(160, 80);
ctx.lineTo(210, 80);
ctx.lineTo(210, 90);
ctx.lineTo(220, 90);
ctx.lineTo(220, 80);
ctx.lineTo(250, 80);
ctx.lineTo(250, 60);
ctx.lineTo(240, 60);
ctx.lineTo(240, 50);
ctx.lineTo(160, 50);
ctx.fill();

ctx.fillStyle = 'rgb(239, 164, 127)';

ctx.beginPath();
ctx.moveTo(130, 100);
ctx.lineTo(130, 120);
ctx.lineTo(140, 120);
ctx.lineTo(140, 140);
ctx.lineTo(150, 140);
ctx.lineTo(150, 150);
ctx.lineTo(170, 150);
ctx.lineTo(170, 140);
ctx.lineTo(240, 140);
ctx.lineTo(240, 150);
ctx.lineTo(250, 150);
ctx.lineTo(250, 130);
ctx.lineTo(230, 130);
ctx.lineTo(230, 120);
ctx.lineTo(220, 120);
ctx.lineTo(220, 100);
ctx.lineTo(210, 100);
ctx.lineTo(210, 120);
ctx.lineTo(200, 120);
ctx.lineTo(200, 130);
ctx.lineTo(170, 130);
ctx.lineTo(170, 120);
ctx.lineTo(160, 120);
ctx.lineTo(160, 100);
ctx.lineTo(130, 100);
ctx.fill();

ctx.fillStyle = 'rgb(4, 1, 0)';

ctx.beginPath();
ctx.moveTo(100, 90);
ctx.lineTo(100, 100);
ctx.lineTo(160, 100);
ctx.lineTo(160, 120);
ctx.lineTo(170, 120);
ctx.lineTo(170, 90);
ctx.lineTo(200, 90);
ctx.lineTo(200, 120);
ctx.lineTo(210, 120);
ctx.lineTo(210, 100);
ctx.lineTo(220, 100);
ctx.lineTo(220, 120);
ctx.lineTo(230, 120);
ctx.lineTo(230, 90);
ctx.lineTo(260, 90);
ctx.lineTo(260, 120);
ctx.lineTo(270, 120);
ctx.lineTo(270, 80);
ctx.lineTo(220, 80);
ctx.lineTo(220, 90);
ctx.lineTo(210, 90);
ctx.lineTo(210, 80);
ctx.lineTo(160, 80);
ctx.lineTo(160, 90);
ctx.lineTo(100, 90);
ctx.fill();

ctx.fillStyle = 'rgb(4, 1, 0)';

ctx.beginPath();
ctx.moveTo(170, 120);
ctx.lineTo(170, 130);
ctx.lineTo(200, 130);
ctx.lineTo(200, 120);
ctx.lineTo(170, 120);
ctx.fill();

ctx.fillStyle = 'rgb(4, 1, 0)';

ctx.beginPath();
ctx.moveTo(230, 120);
ctx.lineTo(230, 130);
ctx.lineTo(260, 130);
ctx.lineTo(260, 120);
ctx.lineTo(230, 120);
ctx.fill();

ctx.fillStyle = 'rgb(245, 130, 32)';

ctx.beginPath();
ctx.moveTo(170, 200);
ctx.lineTo(170, 260);
ctx.lineTo(230, 260);
ctx.lineTo(230, 200);
ctx.lineTo(170, 200);
ctx.fill();

ctx.fillStyle = 'rgb(255, 212, 0)';

ctx.beginPath();
ctx.moveTo(180, 220);
ctx.lineTo(180, 240);
ctx.lineTo(190, 240);
ctx.lineTo(190, 220);
ctx.lineTo(180, 220);
ctx.fill();

ctx.fillStyle = 'rgb(255, 212, 0)';

ctx.beginPath();
ctx.moveTo(190, 240);
ctx.lineTo(190, 250);
ctx.lineTo(210, 250);
ctx.lineTo(210, 240);
ctx.lineTo(190, 240);
ctx.fill();

ctx.fillStyle = 'rgb(255, 212, 0)';

ctx.beginPath();
ctx.moveTo(210, 220);
ctx.lineTo(210, 240);
ctx.lineTo(220, 240);
ctx.lineTo(220, 220);
ctx.lineTo(210, 220);
ctx.fill();

ctx.fillStyle = 'rgb(255, 212, 0)';

ctx.beginPath();
ctx.moveTo(190, 210);
ctx.lineTo(190, 220);
ctx.lineTo(210, 220);
ctx.lineTo(210, 210);
ctx.lineTo(190, 210);
ctx.fill();

ctx.fillStyle = 'rgb(245, 130, 32)';

ctx.beginPath();
ctx.moveTo(100, 300);
ctx.lineTo(100, 320);
ctx.lineTo(120, 320);
ctx.lineTo(120, 310);
ctx.lineTo(150, 310);
ctx.lineTo(150, 320);
ctx.lineTo(190, 320);
ctx.lineTo(190, 300);
ctx.lineTo(100, 300);
ctx.fill();

ctx.fillStyle = 'rgb(245, 130, 32)';

ctx.beginPath();
ctx.moveTo(200, 300);
ctx.lineTo(200, 320);
ctx.lineTo(230, 320);
ctx.lineTo(230, 310);
ctx.lineTo(260, 310);
ctx.lineTo(260, 300);
ctx.lineTo(200, 300);
ctx.fill();

ctx.fillStyle = 'rgb(245, 130, 32)';

ctx.beginPath();
ctx.moveTo(110, 280);
ctx.lineTo(110, 290);
ctx.lineTo(130, 290);
ctx.lineTo(130, 280);
ctx.lineTo(110, 280);
ctx.fill();

ctx.fillStyle = 'rgb(245, 130, 32)';

ctx.beginPath();
ctx.moveTo(120, 260);
ctx.lineTo(120, 270);
ctx.lineTo(170, 270);
ctx.lineTo(170, 260);
ctx.lineTo(120, 260);
ctx.fill();

ctx.fillStyle = 'rgb(245, 130, 32)';

ctx.beginPath();
ctx.moveTo(230, 260);
ctx.lineTo(230, 270);
ctx.lineTo(250, 270);
ctx.lineTo(250, 260);
ctx.lineTo(230, 260);
ctx.fill();

ctx.fillStyle = 'rgb(245, 130, 32)';

ctx.beginPath();
ctx.moveTo(230, 280);
ctx.lineTo(230, 290);
ctx.lineTo(250, 290);
ctx.lineTo(250, 280);
ctx.lineTo(230, 280);
ctx.fill();

ctx.fillStyle = 'rgb(210, 199, 142)';

ctx.beginPath();
ctx.moveTo(40, 350);
ctx.lineTo(40, 360);
ctx.lineTo(310, 360);
ctx.lineTo(310, 350);
ctx.lineTo(40, 350);
ctx.fill();

ctx.fillStyle = 'rgb(167, 14, 19)';

ctx.beginPath();
ctx.moveTo(110, 160);
ctx.lineTo(110, 170);
ctx.lineTo(120, 170);
ctx.lineTo(120, 160);
ctx.lineTo(110, 160);
ctx.fill();

ctx.fillStyle = 'rgb(167, 14, 19)';

ctx.beginPath();
ctx.moveTo(120, 170);
ctx.lineTo(120, 180);
ctx.lineTo(130, 180);
ctx.lineTo(130, 170);
ctx.lineTo(120, 170);
ctx.fill();

ctx.fillStyle = 'rgb(167, 14, 19)';

ctx.beginPath();
ctx.moveTo(250, 170);
ctx.lineTo(250, 180);
ctx.lineTo(260, 180);
ctx.lineTo(260, 170);
ctx.lineTo(250, 170);
ctx.fill();

ctx.fillStyle = 'rgb(79, 56, 72)';

ctx.beginPath();
ctx.moveTo(90, 330);
ctx.lineTo(90, 350);
ctx.lineTo(170, 350);
ctx.lineTo(170, 330);
ctx.lineTo(90, 330);
ctx.fill();

ctx.fillStyle = 'rgb(79, 56, 72)';

ctx.beginPath();
ctx.moveTo(210, 330);
ctx.lineTo(210, 340);
ctx.lineTo(200, 340);
ctx.lineTo(200, 350);
ctx.lineTo(280, 350);
ctx.lineTo(280, 330);
ctx.lineTo(210, 330);
ctx.fill();

ctx.fillStyle = 'rgb(79, 56, 72)';

ctx.beginPath();
ctx.moveTo(270, 240);
ctx.lineTo(270, 250);
ctx.lineTo(250, 250);
ctx.lineTo(250, 280);
ctx.lineTo(260, 280);
ctx.lineTo(260, 290);
ctx.lineTo(300, 290);
ctx.lineTo(300, 280);
ctx.lineTo(310, 280);
ctx.lineTo(310, 250);
ctx.lineTo(300, 250);
ctx.lineTo(300, 240);
ctx.lineTo(270, 240);
ctx.fill();

ctx.fillStyle = 'rgb(79, 56, 72)';

ctx.beginPath();
ctx.moveTo(120, 190);
ctx.lineTo(120, 200);
ctx.lineTo(110, 200);
ctx.lineTo(110, 230);
ctx.lineTo(120, 230);
ctx.lineTo(120, 240);
ctx.lineTo(150, 240);
ctx.lineTo(150, 230);
ctx.lineTo(160, 230);
ctx.lineTo(160, 200);
ctx.lineTo(150, 200);
ctx.lineTo(150, 190);
ctx.lineTo(120, 190);
ctx.fill();

ctx.fillStyle = 'rgb(104, 90, 116)';

ctx.beginPath();
ctx.moveTo(200, 340);
ctx.lineTo(210, 340);
ctx.lineTo(210, 330);
ctx.lineTo(270, 330);
ctx.lineTo(270, 320);
ctx.lineTo(260, 320);
ctx.lineTo(260, 310);
ctx.lineTo(230, 310);
ctx.lineTo(230, 320);
ctx.lineTo(200, 320);
ctx.lineTo(200, 340);
ctx.fill();

ctx.fillStyle = 'rgb(104, 90, 116)';

ctx.beginPath();
ctx.moveTo(90, 320);
ctx.lineTo(90, 330);
ctx.lineTo(180, 330);
ctx.lineTo(180, 320);
ctx.lineTo(150, 320);
ctx.lineTo(150, 310);
ctx.lineTo(120, 310);
ctx.lineTo(120, 320);
ctx.lineTo(90, 320);
ctx.fill();

ctx.fillStyle = 'rgb(104, 90, 116)';

ctx.beginPath();
ctx.moveTo(230, 190);
ctx.lineTo(230, 220);
ctx.lineTo(240, 220);
ctx.lineTo(240, 240);
ctx.lineTo(250, 240);
ctx.lineTo(250, 220);
ctx.lineTo(260, 220);
ctx.lineTo(260, 210);
ctx.lineTo(270, 210);
ctx.lineTo(280, 210);
ctx.lineTo(280, 200);
ctx.lineTo(290, 200);
ctx.lineTo(290, 190);
ctx.lineTo(280, 190);
ctx.lineTo(280, 180);
ctx.lineTo(250, 180);
ctx.lineTo(250, 190);
ctx.lineTo(230, 190);
ctx.fill();

ctx.fillStyle = 'rgb(104, 90, 116)';

ctx.beginPath();
ctx.moveTo(90, 200);
ctx.lineTo(70, 200);
ctx.lineTo(70, 250);
ctx.lineTo(80, 250);
ctx.lineTo(80, 260);
ctx.lineTo(110, 260);
ctx.lineTo(110, 250);
ctx.lineTo(120, 250);
ctx.lineTo(120, 240);
ctx.lineTo(110, 240);
ctx.lineTo(110, 230);
ctx.lineTo(100, 230);
ctx.lineTo(100, 210);
ctx.lineTo(90, 210);
ctx.lineTo(90, 220);
ctx.lineTo(80, 220);
ctx.lineTo(80, 210);
ctx.lineTo(90, 210);
ctx.lineTo(90, 200);
ctx.fill();

ctx.fillStyle = 'rgb(104, 90, 116)';

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(0, 0);
ctx.fill();

ctx.fillStyle = 'rgb(104, 90, 116)';

ctx.beginPath();
ctx.moveTo(110, 200);
ctx.lineTo(100, 200);
ctx.lineTo(100, 190);
ctx.lineTo(90, 190);
ctx.lineTo(90, 180);
ctx.lineTo(80, 180);
ctx.lineTo(80, 170);
ctx.lineTo(70, 170);
ctx.lineTo(70, 160);
ctx.lineTo(60, 160);
ctx.lineTo(60, 150);
ctx.lineTo(50, 150);
ctx.lineTo(50, 140);
ctx.lineTo(40, 140);
ctx.lineTo(40, 130);
ctx.lineTo(30, 130);
ctx.lineTo(30, 120);
ctx.lineTo(20, 120);
ctx.lineTo(20, 110);
ctx.lineTo(10, 110);
ctx.lineTo(10, 100);
ctx.lineTo(0, 100);
ctx.lineTo(0, 80);
ctx.lineTo(10, 80);
ctx.lineTo(10, 90);
ctx.lineTo(20, 90);
ctx.lineTo(20, 80);
ctx.lineTo(50, 80);
ctx.lineTo(50, 90);
ctx.lineTo(30, 90);
ctx.lineTo(30, 110);
ctx.lineTo(40, 110);
ctx.lineTo(40, 120);
ctx.lineTo(50, 120);
ctx.lineTo(50, 130);
ctx.lineTo(60, 130);
ctx.lineTo(60, 140);
ctx.lineTo(70, 140);
ctx.lineTo(70, 150);
ctx.lineTo(80, 150);
ctx.lineTo(80, 160);
ctx.lineTo(90, 160);
ctx.lineTo(90, 170);
ctx.lineTo(100, 170);
ctx.lineTo(100, 180);
ctx.lineTo(110, 180);
ctx.lineTo(110, 200);
ctx.fill();

ctx.fillStyle = 'rgb(4, 1, 0)';

ctx.beginPath();
ctx.moveTo(10, 80);
ctx.lineTo(10, 90);
ctx.lineTo(20, 90);
ctx.lineTo(20, 80);
ctx.moveTo(10, 80);
ctx.fill();

ctx.fillStyle = 'rgb(4, 1, 0)';

ctx.beginPath();
ctx.moveTo(80, 210);
ctx.lineTo(80, 220);
ctx.lineTo(90, 220);
ctx.lineTo(90, 210);
ctx.moveTo(80, 210);
ctx.fill();

ctx.fillStyle = 'rgb(4, 1, 0)';

ctx.beginPath();
ctx.moveTo(80, 190);
ctx.lineTo(80, 200);
ctx.lineTo(90, 200);
ctx.lineTo(90, 190);
ctx.moveTo(80, 190);
ctx.fill();

ctx.fillStyle = 'rgb(79, 56, 72)';

ctx.beginPath();
ctx.moveTo(80, 180);
ctx.lineTo(80, 190);
ctx.lineTo(90, 190);
ctx.lineTo(90, 180);
ctx.lineTo(80, 180);
ctx.fill();

ctx.fillStyle = 'rgb(79, 56, 72)';

ctx.beginPath();
ctx.moveTo(70, 170);
ctx.lineTo(70, 180);
ctx.lineTo(80, 180);
ctx.lineTo(80, 170);
ctx.lineTo(70, 170);
ctx.fill();

ctx.fillStyle = 'rgb(79, 56, 72)';

ctx.beginPath();
ctx.moveTo(60, 160);
ctx.lineTo(60, 170);
ctx.lineTo(70, 170);
ctx.lineTo(70, 160);
ctx.lineTo(60, 160);
ctx.fill();

ctx.fillStyle = 'rgb(79, 56, 72)';

ctx.beginPath();
ctx.moveTo(50, 150);
ctx.lineTo(50, 160);
ctx.lineTo(60, 160);
ctx.lineTo(60, 150);
ctx.lineTo(50, 150);
ctx.fill();

ctx.fillStyle = 'rgb(79, 56, 72)';

ctx.beginPath();
ctx.moveTo(40, 140);
ctx.lineTo(40, 150);
ctx.lineTo(50, 150);
ctx.lineTo(50, 140);
ctx.lineTo(40, 140);
ctx.fill();

ctx.fillStyle = 'rgb(79, 56, 72)';

ctx.beginPath();
ctx.moveTo(30, 130);
ctx.lineTo(30, 140);
ctx.lineTo(40, 140);
ctx.lineTo(40, 130);
ctx.lineTo(30, 130);
ctx.fill();

ctx.fillStyle = 'rgb(79, 56, 72)';

ctx.beginPath();
ctx.moveTo(20, 120);
ctx.lineTo(20, 130);
ctx.lineTo(30, 130);
ctx.lineTo(30, 120);
ctx.lineTo(20, 120);
ctx.fill();

ctx.fillStyle = 'rgb(79, 56, 72)';

ctx.beginPath();
ctx.moveTo(10, 110);
ctx.lineTo(10, 120);
ctx.lineTo(20, 120);
ctx.lineTo(20, 110);
ctx.lineTo(10, 110);
ctx.fill();

ctx.fillStyle = 'rgb(79, 56, 72)';

ctx.beginPath();
ctx.moveTo(0, 100);
ctx.lineTo(0, 110);
ctx.lineTo(10, 110);
ctx.lineTo(10, 100);
ctx.lineTo(0, 100);
ctx.fill();

ctx.fillStyle = 'rgb(79, 56, 72)';

ctx.beginPath();
ctx.moveTo(10, 70);
ctx.lineTo(40, 70);
ctx.lineTo(40, 80);
ctx.lineTo(10, 80);
ctx.lineTo(10, 70);
ctx.fill();

ctx.fillStyle = 'rgb(79, 56, 72)';

ctx.beginPath();
ctx.moveTo(100, 170);
ctx.lineTo(100, 180);
ctx.lineTo(110, 180);
ctx.lineTo(110, 170);
ctx.lineTo(100, 170);
ctx.fill();

ctx.fillStyle = 'rgb(79, 56, 72)';

ctx.beginPath();
ctx.moveTo(110, 180);
ctx.lineTo(110, 190);
ctx.lineTo(120, 190);
ctx.lineTo(120, 180);
ctx.lineTo(110, 180);
ctx.fill();

ctx.fillStyle = 'rgb(79, 56, 72)';

ctx.beginPath();
ctx.moveTo(150, 180);
ctx.lineTo(170, 180);
ctx.lineTo(170, 190);
ctx.lineTo(150, 190);
ctx.lineTo(150, 180);
ctx.fill();

ctx.fillStyle = 'rgb(79, 56, 72)';

ctx.beginPath();
ctx.moveTo(170, 190);
ctx.lineTo(230, 190);
ctx.lineTo(230, 200);
ctx.lineTo(170, 200);
ctx.lineTo(170, 190);
ctx.fill();

ctx.fillStyle = 'rgb(79, 56, 72)';

ctx.beginPath();
ctx.moveTo(230, 180);
ctx.lineTo(250, 180);
ctx.lineTo(250, 190);
ctx.lineTo(230, 190);
ctx.lineTo(230, 180);
ctx.fill();

ctx.fillStyle = 'rgb(0, 0, 0)';

ctx.beginPath();
ctx.moveTo(110, 250);
ctx.lineTo(110, 260);
ctx.lineTo(120, 260);
ctx.lineTo(120, 250);
ctx.lineTo(110, 250);
ctx.fill();

ctx.fillStyle = 'rgb(79, 56, 72)';

ctx.beginPath();
ctx.moveTo(110, 290);
ctx.lineTo(120, 290);
ctx.lineTo(120, 300);
ctx.lineTo(110, 300);
ctx.lineTo(110, 290);
ctx.fill();

ctx.fillStyle = 'rgb(79, 56, 72)';

ctx.beginPath();
ctx.moveTo(240, 290);
ctx.lineTo(250, 290);
ctx.lineTo(250, 300);
ctx.lineTo(240, 300);
ctx.lineTo(240, 290);
ctx.fill();

ctx.fillStyle = 'rgb(79, 56, 72)';

ctx.beginPath();
ctx.moveTo(190, 300);
ctx.lineTo(200, 300);
ctx.lineTo(200, 310);
ctx.lineTo(190, 310);
ctx.lineTo(190, 300);
ctx.fill();

ctx.fillStyle = 'rgb(79, 56, 72)';

ctx.beginPath();
ctx.moveTo(170, 260);
ctx.lineTo(180, 260);
ctx.lineTo(180, 270);
ctx.lineTo(170, 270);
ctx.lineTo(170, 270);
ctx.fill();

ctx.fillStyle = 'rgb(79, 56, 72)';

ctx.beginPath();
ctx.moveTo(220, 260);
ctx.lineTo(230, 260);
ctx.lineTo(230, 270);
ctx.lineTo(220, 270);
ctx.lineTo(220, 270);
ctx.fill();

ctx.fillStyle = 'rgb(79, 56, 72)';

ctx.beginPath();
ctx.moveTo(260, 160);
ctx.lineTo(270, 160);
ctx.lineTo(270, 180);
ctx.lineTo(260, 180);
ctx.lineTo(260, 160);
ctx.fill();

ctx.fillStyle = 'rgb(79, 56, 72)';

ctx.beginPath();
ctx.moveTo(270, 200);
ctx.lineTo(300, 200);
ctx.lineTo(300, 210);
ctx.lineTo(270, 210);
ctx.lineTo(270, 200);
ctx.fill();

ctx.fillStyle = 'rgb(79, 56, 72)';

ctx.beginPath();
ctx.moveTo(260, 210);
ctx.lineTo(270, 210);
ctx.lineTo(270, 220);
ctx.lineTo(260, 220);
ctx.lineTo(260, 210);
ctx.fill();

ctx.fillStyle = 'rgb(79, 56, 72)';

ctx.beginPath();
ctx.moveTo(250, 220);
ctx.lineTo(260, 220);
ctx.lineTo(260, 240);
ctx.lineTo(250, 240);
ctx.lineTo(250, 220);
ctx.fill();

ctx.fillStyle = 'rgb(79, 56, 72)';

ctx.beginPath();
ctx.moveTo(90, 190);
ctx.lineTo(100, 190);
ctx.lineTo(100, 200);
ctx.lineTo(90, 200);
ctx.lineTo(90, 190);
ctx.fill();

ctx.fillStyle = 'rgb(4, 1, 0)';

ctx.beginPath();
ctx.moveTo(120, 180);
ctx.lineTo(140, 180);
ctx.lineTo(140, 190);
ctx.lineTo(120, 190);
ctx.lineTo(120, 180);
ctx.fill();

ctx.fillStyle = 'rgb(4, 1, 0)';

ctx.beginPath();
ctx.moveTo(110, 190);
ctx.lineTo(120, 190);
ctx.lineTo(120, 200);
ctx.lineTo(110, 200);
ctx.lineTo(110, 190);
ctx.fill();

ctx.fillStyle = 'rgb(4, 1, 0)';

ctx.beginPath();
ctx.moveTo(110, 240);
ctx.lineTo(120, 240);
ctx.lineTo(120, 230);
ctx.lineTo(110, 230);
ctx.lineTo(110, 240);
ctx.fill();

ctx.fillStyle = 'rgb(4, 1, 0)';

ctx.beginPath();
ctx.moveTo(110, 240);
ctx.lineTo(120, 240);
ctx.lineTo(120, 230);
ctx.lineTo(110, 230);
ctx.lineTo(110, 240);
ctx.fill();

ctx.fillStyle = 'rgb(4, 1, 0)';

ctx.beginPath();
ctx.moveTo(90, 200);
ctx.lineTo(110, 200);
ctx.lineTo(110, 230);
ctx.lineTo(100, 230);
ctx.lineTo(100, 210);
ctx.lineTo(90, 210);
ctx.lineTo(90, 200);
ctx.fill();

ctx.fillStyle = 'rgb(4, 1, 0)';

ctx.beginPath();
ctx.moveTo(120, 240);
ctx.lineTo(140, 240);
ctx.lineTo(140, 250);
ctx.lineTo(120, 250);
ctx.lineTo(120, 240);
ctx.fill();

ctx.fillStyle = 'rgb(4, 1, 0)';

ctx.beginPath();
ctx.moveTo(140, 230);
ctx.lineTo(150, 230);
ctx.lineTo(150, 240);
ctx.lineTo(140, 240);
ctx.lineTo(140, 230);
ctx.fill();

ctx.fillStyle = 'rgb(104, 90, 116)';

ctx.beginPath();
ctx.moveTo(150, 190);
ctx.lineTo(170, 190);
ctx.lineTo(170, 240);
ctx.lineTo(150, 240);
ctx.lineTo(150, 240);
ctx.lineTo(150, 230);
ctx.lineTo(160, 230);
ctx.lineTo(160, 200);
ctx.lineTo(150, 200);
ctx.lineTo(150, 190);
ctx.fill();

ctx.fillStyle = 'rgb(104, 90, 116)';

ctx.beginPath();
ctx.moveTo(140, 180);
ctx.lineTo(150, 180);
ctx.lineTo(150, 190);
ctx.lineTo(140, 190);
ctx.lineTo(140, 180);
ctx.fill();

ctx.fillStyle = 'rgb(104, 90, 116)';

ctx.beginPath();
ctx.moveTo(110, 170);
ctx.lineTo(120, 170);
ctx.lineTo(120, 180);
ctx.lineTo(110, 180);
ctx.lineTo(110, 170);
ctx.fill();

ctx.fillStyle = 'rgb(104, 90, 116)';

ctx.beginPath();
ctx.moveTo(100, 150);
ctx.lineTo(110, 150);
ctx.lineTo(110, 170);
ctx.lineTo(100, 170);
ctx.lineTo(100, 150);
ctx.fill();

ctx.fillStyle = 'rgb(79, 56, 72)';

ctx.beginPath();
ctx.moveTo(150, 240);
ctx.lineTo(170, 240);
ctx.lineTo(170, 250);
ctx.lineTo(150, 250);
ctx.lineTo(150, 140);
ctx.fill();

ctx.fillStyle = 'rgb(79, 56, 72)';

ctx.beginPath();
ctx.moveTo(230, 220);
ctx.lineTo(240, 220);
ctx.lineTo(240, 240);
ctx.lineTo(250, 240);
ctx.lineTo(250, 250);
ctx.lineTo(230, 250);
ctx.lineTo(230, 220);
ctx.fill();

ctx.fillStyle = 'rgb(4, 1, 0)';

ctx.beginPath();
ctx.moveTo(260, 240);
ctx.lineTo(270, 240);
ctx.lineTo(270, 250);
ctx.lineTo(260, 250);
ctx.lineTo(260, 240);
ctx.fill();

ctx.fillStyle = 'rgb(4, 1, 0)';

ctx.beginPath();
ctx.moveTo(270, 230);
ctx.lineTo(300, 230);
ctx.lineTo(300, 240);
ctx.lineTo(270, 240);
ctx.lineTo(270, 130);
ctx.fill();

ctx.fillStyle = 'rgb(4, 1, 0)';

ctx.beginPath();
ctx.moveTo(300, 240);
ctx.lineTo(310, 240);
ctx.lineTo(310, 250);
ctx.lineTo(300, 250);
ctx.lineTo(300, 140);
ctx.fill();

ctx.fillStyle = 'rgb(104, 90, 116)';

ctx.beginPath();
ctx.moveTo(270, 210);
ctx.lineTo(300, 210);
ctx.lineTo(300, 220);
ctx.lineTo(310, 220);
ctx.lineTo(310, 240);```
ctx.lineTo(300, 240);
ctx.lineTo(300, 230);
ctx.lineTo(270, 230);
ctx.lineTo(270, 240);
ctx.lineTo(260, 240);
ctx.lineTo(260, 220);
ctx.lineTo(270, 220);
ctx.lineTo(270, 210);
ctx.fill();

ctx.fillStyle = 'rgb(104, 90, 116)';

ctx.beginPath();
ctx.moveTo(230, 250);
ctx.lineTo(250, 250);
ctx.lineTo(250, 260);
ctx.lineTo(230, 260);
ctx.lineTo(230, 250);
ctx.fill();

ctx.fillStyle = 'rgb(104, 90, 116)';

ctx.beginPath();
ctx.moveTo(140, 240);
ctx.lineTo(150, 240);
ctx.lineTo(150, 250);
ctx.lineTo(170, 250);
ctx.lineTo(170, 260);
ctx.lineTo(120, 260);
ctx.lineTo(120, 250);
ctx.lineTo(140, 250);
ctx.lineTo(140, 240);
ctx.fill();

ctx.fillStyle = 'rgb(104, 90, 116)';

ctx.beginPath();
ctx.moveTo(120, 270);
ctx.lineTo(180, 270);
ctx.lineTo(180, 280);
ctx.lineTo(120, 280);
ctx.lineTo(120, 270);
ctx.fill();

ctx.fillStyle = 'rgb(104, 90, 116)';

ctx.beginPath();
ctx.moveTo(120, 290);
ctx.lineTo(180, 290);
ctx.lineTo(180, 300);
ctx.lineTo(120, 300);
ctx.lineTo(120, 290);
ctx.fill();

ctx.fillStyle = 'rgb(104, 90, 116)';

ctx.beginPath();
ctx.moveTo(190, 290);
ctx.lineTo(200, 290);
ctx.lineTo(200, 300);
ctx.lineTo(190, 300);
ctx.lineTo(190, 290);
ctx.fill();

ctx.fillStyle = 'rgb(104, 90, 116)';

ctx.beginPath();
ctx.moveTo(220, 270);
ctx.lineTo(250, 270);
ctx.lineTo(250, 280);
ctx.lineTo(220, 280);
ctx.lineTo(220, 270);
ctx.fill();

ctx.fillStyle = 'rgb(104, 90, 116)';

ctx.beginPath();
ctx.moveTo(210, 290);
ctx.lineTo(240, 290);
ctx.lineTo(240, 300);
ctx.lineTo(210, 300);
ctx.lineTo(210, 290);
ctx.fill();

ctx.fillStyle = 'rgb(104, 90, 116)';

ctx.beginPath();
ctx.moveTo(180, 260);
ctx.lineTo(220, 260);
ctx.lineTo(220, 270);
ctx.lineTo(210, 270);
ctx.lineTo(210, 280);
ctx.lineTo(190, 280);
ctx.lineTo(190, 270);
ctx.lineTo(180, 270);
ctx.lineTo(180, 260);
ctx.fill();

ctx.fillStyle = 'rgb(79, 56, 72)';

ctx.beginPath();
ctx.moveTo(130, 280);
ctx.lineTo(180, 280);
ctx.lineTo(180, 270);
ctx.lineTo(190, 270);
ctx.lineTo(190, 280);
ctx.lineTo(210, 280);
ctx.lineTo(210, 270);
ctx.lineTo(220, 270);
ctx.lineTo(220, 280);
ctx.lineTo(230, 280);
ctx.lineTo(230, 290);
ctx.lineTo(210, 290);
ctx.lineTo(210, 300);
ctx.lineTo(200, 300);
ctx.lineTo(200, 290);
ctx.lineTo(190, 290);
ctx.lineTo(190, 300);
ctx.lineTo(180, 300);
ctx.lineTo(180, 290);
ctx.lineTo(130, 290);
ctx.lineTo(130, 280);
ctx.fill();

ctx.fillStyle = 'rgb(255, 255, 255)';

ctx.beginPath();
ctx.moveTo(170, 90);
ctx.lineTo(200, 90);
ctx.lineTo(200, 120);
ctx.lineTo(170, 120);
ctx.lineTo(170, 90);
ctx.fill();

ctx.fillStyle = 'rgb(255, 255, 255)';

ctx.beginPath();
ctx.moveTo(230, 90);
ctx.lineTo(260, 90);
ctx.lineTo(260, 120);
ctx.lineTo(230, 120);
ctx.lineTo(230, 90);
ctx.fill();

HTML

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body bgcolor="#FEF8D8">
    <canvas width="1000px" height="1000px" id="canvas"></canvas>
    <script src="./js/script.js"></script>
</body>
</html>

gordon_freeman_on_canvas_of_pixels's People

Contributors

danielpetelin avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar

gordon_freeman_on_canvas_of_pixels's Issues

Refactor

Привет!
B школе тоже программировал подобным образом. Я только использовал миллиметровку. Брат нарисовал картинку пантеры, а я вырисовывал линии по точкам.

Работа хорошая, но можно улучшить. Что если захочется быстро перенести целую картинку на другие координаты? В данном случае нужно будет менять очень много значений. Чтобы этого не делать необходимо привязываться к переменным. Ну, например:

let x = 0;
let y = 0;
ctx.lineTo(x+140, y+20);

Eще, думаю, можно сократить количество инструкций использованием fillRect

Удачи!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.