Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	draw
ID	5354118449315840
Created	13 days ago, 1742914383731
Updated	13 days ago, 1742930205396
Code	<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>draw</title> <!--inport google fonts--> <link href="https://fonts.googleapis.com/css?family=Noto+&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Road+Rage&display=swap" rel="stylesheet"> <style> body{ margin:0; } canvas{ position:fixed; top:0px; left:0px; z-index:1000; } img{ position:fixed; top:0px; left:0px; width:600px; z-index:999; /filter:brightness(500%);/ display:none; } h1{ color:white; position:fixed; bottom:0px; left:0px; z-index:1001; font-size:32px; /margin:5px 5%;/ text-align:center; font-family:"Noto Sans"; } /makes it so you can't see the graphic canvas/ a{ color:white; } #g-canvas{ /display:none;/ } #sub{ position:fixed; top:0px; right:0px; width:150px; height:83px; /background:red;/ z-index:2000; } </style> </head> <body id = "body"> <!--the canvas to draw the graphic on--> <!--<a target = "_blank" href = "https://www.khanacademy.org/computer-programming/vicioustrexs-subpage-20/5318030875082752">--> <img src = "https://www.khanacademy.org/computer-programming/new-program/6484081651073024/5515352259805184.png"> <canvas id = "g-canvas"></canvas> <!--<h1>Coming out soon <a href = "">sub</a> to get notified when</h1>--> <!--</a>--> <!--the canvas to draw the game--> <!--link to my subpage--> <!--<a id = "sub" target = "_blank" href = "https://www.khanacademy.org/computer-programming/vicioustrexs-subpa/5318030875082752"></a>--> <script type> //the graphics function gra() { //get the canvas and context let g_canvas = document.getElementById('g-canvas') let ctx = g_canvas.getContext('2d') g_canvas.width = 600; g_canvas.height = 500; var e = new EyeDropper(); window.addEventListener("click",function(){ e.open().then(function(e){ alert(JSON.stringify(e)) },function(e){ alert(e) }); }); function ellipse(x, y, w, h) { ctx.beginPath(); ctx.ellipse(x, y, w / 2, h / 2, 0, 0, 2 * Math.PI); ctx.fill(); ctx.closePath(); }; function quad(x1, y1, x2, y2, x3, y3, x4, y4) { ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.lineTo(x3, y3); ctx.lineTo(x4, y4); ctx.lineTo(x1, y1); ctx.fill(); ctx.closePath(); } ctx.fillStyle = "#00003f"; ctx.beginPath(); ctx.lineTo(105,242); ctx.lineTo(108,264); ctx.lineTo(112,301); ctx.lineTo(118,324); ctx.lineTo(129,349); ctx.lineTo(145,366); ctx.lineTo(159,376); ctx.lineTo(180,397); ctx.lineTo(194,411); ctx.lineTo(204,423); ctx.lineTo(221,445); ctx.lineTo(227,461); ctx.lineTo(235,487); ctx.lineTo(248,483); ctx.lineTo(261,473); ctx.lineTo(270,462); ctx.lineTo(273,447); ctx.lineTo(271,441); ctx.lineTo(291,440); ctx.lineTo(302,437); ctx.lineTo(313,431); ctx.lineTo(329,423); ctx.lineTo(338,415); ctx.lineTo(345,405); ctx.lineTo(356,392); ctx.lineTo(247,239); ctx.lineTo(157,153); ctx.lineTo(125,178); ctx.fill() ctx.closePath(); ctx.fillStyle = "#bf0000" ctx.beginPath(); ctx.lineTo(131,136); ctx.lineTo(111,159); ctx.lineTo(105,171); ctx.lineTo(105,190); ctx.lineTo(105,205); ctx.lineTo(104,225); ctx.lineTo(109,249); ctx.lineTo(118,252); ctx.lineTo(122,268); ctx.lineTo(129,287); ctx.lineTo(132,286); ctx.lineTo(135,280); ctx.lineTo(139,292); ctx.lineTo(142,295); ctx.lineTo(144,295); ctx.lineTo(146,287); ctx.lineTo(148,278); ctx.lineTo(152,282); ctx.lineTo(155,291); ctx.lineTo(162,305); ctx.lineTo(166,315); ctx.lineTo(172,314); ctx.lineTo(176,316); ctx.lineTo(178,314); ctx.lineTo(178,310); ctx.lineTo(176,304); ctx.lineTo(176,296); ctx.lineTo(180,288); ctx.lineTo(186,301); ctx.lineTo(189,295); ctx.lineTo(178,274); ctx.lineTo(158,243); ctx.lineTo(142,160); ctx.fill() ctx.closePath(); ctx.fillStyle = "#3f0000" ctx.beginPath(); ctx.lineTo(176,281); ctx.lineTo(185,293); ctx.lineTo(183,304); ctx.lineTo(174,309); ctx.lineTo(171,315); ctx.lineTo(178,329); ctx.lineTo(182,339); ctx.lineTo(191,350); ctx.lineTo(199,356); ctx.lineTo(210,355); ctx.lineTo(219,345); ctx.lineTo(227,344); ctx.lineTo(237,338); ctx.lineTo(248,327); ctx.lineTo(259,322); ctx.lineTo(263,311); ctx.lineTo(268,302); ctx.lineTo(266,292); ctx.lineTo(269,290); ctx.lineTo(273,286); ctx.lineTo(227,254); ctx.lineTo(179,245); ctx.fill() ctx.closePath(); ctx.fillStyle = "#7f0000" ctx.beginPath(); ctx.lineTo(185,299); ctx.lineTo(177,304); ctx.lineTo(170,313); ctx.lineTo(176,328); ctx.lineTo(183,340); ctx.lineTo(192,333); ctx.lineTo(203,335); ctx.lineTo(208,340); ctx.lineTo(208,330); ctx.lineTo(217,331); ctx.lineTo(223,326); ctx.lineTo(233,320); ctx.lineTo(239,327); ctx.lineTo(249,322); ctx.lineTo(253,318); ctx.lineTo(261,309); ctx.lineTo(262,300); ctx.lineTo(253,286); ctx.lineTo(196,277); ctx.fill() ctx.closePath(); ctx.fillStyle = "#410300" ellipse(139,136, 50, 50) ctx.fillStyle = "#bf0000" ctx.beginPath(); ctx.lineTo(187,299); ctx.lineTo(178,309); ctx.lineTo(186,315); ctx.lineTo(199,321); ctx.lineTo(207,319); ctx.lineTo(221,320); ctx.lineTo(228,316); ctx.lineTo(235,301); ctx.lineTo(225,294); ctx.lineTo(195,297); ctx.fill() ctx.closePath(); ctx.beginPath(); ctx.lineTo(253,309); ctx.lineTo(245,302); ctx.lineTo(250,294); ctx.lineTo(243,291); ctx.lineTo(226,288); ctx.lineTo(211,283); ctx.lineTo(203,268); ctx.lineTo(224,246); ctx.lineTo(263,257); ctx.lineTo(269,272); ctx.lineTo(262,279); ctx.lineTo(260,286); ctx.lineTo(257,292); ctx.lineTo(260,301); ctx.fill() ctx.closePath(); ctx.fillStyle = "#ff3f00" ctx.beginPath(); ctx.lineTo(321,270); ctx.lineTo(309,259); ctx.lineTo(290,249); ctx.lineTo(264,236); ctx.lineTo(253,229); ctx.lineTo(244,228); ctx.lineTo(228,235); ctx.lineTo(219,246); ctx.lineTo(216,255); ctx.lineTo(224,262); ctx.lineTo(246,264); ctx.lineTo(252,276); ctx.lineTo(266,276); ctx.lineTo(266,269); ctx.lineTo(288,278); ctx.lineTo(314,273); ctx.fill() ctx.closePath(); ctx.fillStyle = "#ff7f00" ctx.beginPath(); ctx.lineTo(128,144); ctx.lineTo(132,163); ctx.lineTo(124,172); ctx.lineTo(124,183); ctx.lineTo(132,195); ctx.lineTo(128,212); ctx.lineTo(129,224); ctx.lineTo(131,228); ctx.lineTo(132,242); ctx.lineTo(138,246); ctx.lineTo(149,251); ctx.lineTo(151,259); ctx.lineTo(155,253); ctx.lineTo(161,264); ctx.lineTo(164,266); ctx.lineTo(164,273); ctx.lineTo(169,276); ctx.lineTo(173,284); ctx.lineTo(179,281); ctx.lineTo(181,275); ctx.lineTo(180,270); ctx.lineTo(178,267); ctx.lineTo(180,267); ctx.lineTo(183,271); ctx.lineTo(183,277); ctx.lineTo(186,281); ctx.lineTo(189,278); ctx.lineTo(190,272); ctx.lineTo(187,266); ctx.lineTo(187,260); ctx.lineTo(184,256); ctx.lineTo(185,253); ctx.lineTo(189,255); ctx.lineTo(192,261); ctx.lineTo(195,269); ctx.lineTo(201,278); ctx.lineTo(215,276); ctx.lineTo(222,276); ctx.lineTo(226,279); ctx.lineTo(227,274); ctx.lineTo(226,259); ctx.lineTo(232,265); ctx.lineTo(238,269); ctx.lineTo(242,261); ctx.lineTo(233,251); ctx.lineTo(222,241); ctx.lineTo(217,243); ctx.lineTo(196,211); ctx.lineTo(187,172); ctx.lineTo(181,144); ctx.lineTo(177,135); ctx.lineTo(166,129); ctx.lineTo(141,135); ctx.fill() ctx.closePath(); ctx.fillStyle = "#ffb300" ctx.beginPath(); ctx.lineTo(153,185); ctx.lineTo(148,186); ctx.lineTo(145,181); ctx.lineTo(142,190); ctx.lineTo(135,200); ctx.lineTo(136,213); ctx.lineTo(136,221); ctx.lineTo(140,213); ctx.lineTo(140,206); ctx.lineTo(146,219); ctx.lineTo(143,229); ctx.lineTo(149,231); ctx.lineTo(153,225); ctx.lineTo(155,224); ctx.lineTo(160,217); ctx.lineTo(160,232); ctx.lineTo(163,245); ctx.lineTo(167,246); ctx.lineTo(171,252); ctx.lineTo(175,257); ctx.lineTo(182,261); ctx.lineTo(181,249); ctx.lineTo(181,236); ctx.lineTo(177,224); ctx.lineTo(176,213); ctx.lineTo(172,205); ctx.lineTo(172,195); ctx.lineTo(164,199); ctx.lineTo(158,195); ctx.lineTo(155,202); ctx.lineTo(151,206); ctx.lineTo(149,194); ctx.lineTo(158,192); ctx.fill() ctx.closePath(); ctx.beginPath(); ctx.lineTo(183,143); ctx.lineTo(172,141); ctx.lineTo(174,148); ctx.lineTo(168,147); ctx.lineTo(164,155); ctx.lineTo(171,166); ctx.lineTo(176,172); ctx.lineTo(183,173); ctx.lineTo(181,180); ctx.lineTo(176,183); ctx.lineTo(177,192); ctx.lineTo(188,198); ctx.lineTo(189,203); ctx.lineTo(193,206); ctx.lineTo(193,207); ctx.lineTo(188,210); ctx.lineTo(187,227); ctx.lineTo(194,240); ctx.lineTo(196,253); ctx.lineTo(195,259); ctx.lineTo(199,263); ctx.lineTo(203,260); ctx.lineTo(203,257); ctx.lineTo(208,263); ctx.lineTo(211,268); ctx.lineTo(213,262); ctx.lineTo(216,264); ctx.lineTo(218,269); ctx.lineTo(224,269); ctx.lineTo(224,263); ctx.lineTo(222,255); ctx.lineTo(220,247); ctx.lineTo(216,235); ctx.lineTo(212,227); ctx.lineTo(209,216); ctx.lineTo(217,225); ctx.lineTo(232,234); ctx.lineTo(246,241); ctx.lineTo(255,238); ctx.lineTo(255,233); ctx.lineTo(232,219); ctx.lineTo(203,181); ctx.lineTo(200,166); ctx.lineTo(195,162); ctx.lineTo(188,152); ctx.fill() ctx.closePath(); ctx.fillStyle = "#ffff3f" ctx.beginPath(); ctx.lineTo(241,234); ctx.lineTo(249,233); ctx.lineTo(260,236); ctx.lineTo(263,236); ctx.lineTo(242,221); ctx.lineTo(226,204); ctx.lineTo(216,191); ctx.lineTo(202,168); ctx.lineTo(198,165); ctx.lineTo(199,175); ctx.lineTo(189,180); ctx.lineTo(183,186); ctx.lineTo(189,191); ctx.lineTo(197,197); ctx.lineTo(210,207); ctx.lineTo(221,217); ctx.lineTo(230,224); ctx.lineTo(240,235); ctx.lineTo(245,235); ctx.fill() ctx.closePath(); ctx.fillStyle = "#ff3f00" ctx.beginPath(); ctx.lineTo(128,152); ctx.lineTo(124,167); ctx.lineTo(119,174); ctx.lineTo(118,193); ctx.lineTo(119,208); ctx.lineTo(127,202); ctx.lineTo(131,202); ctx.lineTo(135,192); ctx.lineTo(138,188); ctx.lineTo(136,177); ctx.lineTo(140,172); ctx.lineTo(133,162); ctx.fill() ctx.closePath(); ctx.fillStyle = "#7f0100" ctx.beginPath(); ctx.lineTo(106,161); ctx.lineTo(116,166); ctx.lineTo(125,155); ctx.lineTo(129,147); ctx.lineTo(133,140); ctx.lineTo(133,137); ctx.lineTo(134,135); ctx.lineTo(106,148); ctx.fill() ctx.closePath(); ctx.fillStyle = "#bf7f3a" ctx.beginPath(); ctx.lineTo(103,101); ctx.lineTo(82,112); ctx.lineTo(116,116); ctx.fill() ctx.closePath(); ctx.fillStyle = "#bf0000" ctx.beginPath(); ctx.lineTo(164,115); ctx.lineTo(154,105); ctx.lineTo(141,95); ctx.lineTo(146,94); ctx.lineTo(157,92); ctx.lineTo(165,84); ctx.lineTo(170,74); ctx.lineTo(171,62); ctx.lineTo(168,57); ctx.lineTo(151,67); ctx.lineTo(158,55); ctx.lineTo(157,45); ctx.lineTo(143,64); ctx.lineTo(133,69); ctx.lineTo(139,50); ctx.lineTo(142,43); ctx.lineTo(138,43); ctx.lineTo(131,56); ctx.lineTo(123,70); ctx.lineTo(124,57); ctx.lineTo(123,53); ctx.lineTo(119,53); ctx.lineTo(118,65); ctx.lineTo(93,90); ctx.lineTo(90,99); ctx.lineTo(100,109); ctx.lineTo(95,123); ctx.lineTo(99,138); ctx.lineTo(99,153); ctx.lineTo(109,162); ctx.lineTo(119,160); ctx.lineTo(125,154); ctx.lineTo(125,144); ctx.lineTo(133,136); ctx.lineTo(161,113); ctx.fill() ctx.closePath() ctx.fillStyle = "#ff0000" ctx.beginPath(); ctx.lineTo(120,116); ctx.lineTo(115,112); ctx.lineTo(111,111); ctx.lineTo(107,107); ctx.lineTo(104,105); ctx.lineTo(110,103); ctx.lineTo(109,99); ctx.lineTo(110,98); ctx.lineTo(106,98); ctx.lineTo(103,98); ctx.lineTo(102,98); ctx.lineTo(91,99); ctx.lineTo(92,92); ctx.lineTo(92,86); ctx.lineTo(91,81); ctx.lineTo(97,71); ctx.lineTo(103,63); ctx.lineTo(107,59); ctx.lineTo(112,59); ctx.lineTo(114,62); ctx.lineTo(116,56); ctx.lineTo(124,62); ctx.lineTo(124,62); ctx.lineTo(135,46); ctx.lineTo(139,50); ctx.lineTo(138,60); ctx.lineTo(155,48); ctx.lineTo(154,57); ctx.lineTo(168,56); ctx.lineTo(164,65); ctx.lineTo(165,70); ctx.lineTo(171,68); ctx.lineTo(170,77); ctx.lineTo(163,86); ctx.lineTo(155,94); ctx.lineTo(148,94); ctx.lineTo(142,86); ctx.lineTo(138,84); ctx.lineTo(129,88); ctx.lineTo(128,93); ctx.lineTo(131,96); ctx.lineTo(134,102); ctx.lineTo(140,108); ctx.lineTo(137,111); ctx.lineTo(133,111); ctx.lineTo(133,115); ctx.lineTo(138,116); ctx.lineTo(143,118); ctx.lineTo(148,114); ctx.lineTo(147,111); ctx.lineTo(143,108); ctx.lineTo(141,107); ctx.lineTo(139,105); ctx.lineTo(139,103); ctx.lineTo(147,103); ctx.lineTo(154,109); ctx.lineTo(161,112); ctx.lineTo(167,119); ctx.lineTo(175,132); ctx.lineTo(175,134); ctx.lineTo(171,134); ctx.lineTo(163,127); ctx.lineTo(165,138); ctx.lineTo(155,136); ctx.lineTo(155,157); ctx.lineTo(150,152); ctx.lineTo(148,145); ctx.lineTo(142,141); ctx.lineTo(144,130); ctx.lineTo(144,127); ctx.lineTo(135,133); ctx.lineTo(129,139); ctx.lineTo(126,130); ctx.lineTo(124,126); ctx.lineTo(128,119); ctx.lineTo(130,119); ctx.lineTo(129,116); ctx.fill() ctx.closePath(); ctx.fillStyle = "#be0603" ellipse(121,103, 13, 13) ctx.fillStyle = "#410300" ellipse(121,103, 7, 7) } //display gra(); //<script> <---- for restart button </script> </body> </html> <script> </script>
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgIfCrbHBCQw
Votes	1
Spin-Offs	0
Type	WEBPAGE
Width	400
Height	600
User Flagged	false
Origin Scratchpad	{"id":"5838081794097152","title":"drawing program","deleted":"false","official":"false"}
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Vicioustrex 🐓
Author Name	Vicioustrex
Author ID	kaid_1063463007130342809105382
Author Profile Access	PUBLIC

Archive Data

Added	9 days ago, 1743306230481
Updated	9 days ago, 1743306230481
Source Deleted	unknown