Viewing Program

Program Data

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

Title	draw
ID	6543203280994304
Created	12 days ago, 1743022798825
Updated	10 days ago, 1743197382145
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 = "#410300" ellipse(134,151, 50, 98) 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 = "black" // ctx.fillStyle = "white" ctx.beginPath(); ctx.moveTo(316,270); ctx.quadraticCurveTo(366, 104, 459, 119); ctx.quadraticCurveTo(571, 104, 569, 342); ctx.quadraticCurveTo(571, 404, 547, 431); ctx.quadraticCurveTo(535, 439, 535, 425); ctx.quadraticCurveTo(554, 383, 544, 346); ctx.quadraticCurveTo(534, 383, 504, 407); ctx.quadraticCurveTo(471, 435, 493, 398); ctx.quadraticCurveTo(548, 325, 488, 189); ctx.quadraticCurveTo(498, 253, 460, 274); ctx.quadraticCurveTo(438, 294, 448, 364); ctx.quadraticCurveTo(448, 391, 422, 378); ctx.quadraticCurveTo(417, 369, 414, 350); ctx.quadraticCurveTo(395, 357, 394, 356); ctx.quadraticCurveTo(333, 435, 273, 420); ctx.fill() ctx.closePath(); ctx.fillStyle = "#005555" // ctx.fillStyle = "white" ctx.beginPath(); ctx.moveTo(316,270); ctx.quadraticCurveTo(366, 104, 459, 119); ctx.quadraticCurveTo(487, 121, 503, 139); ctx.quadraticCurveTo(517, 158, 503, 158); ctx.quadraticCurveTo(472, 158, 465, 188); ctx.quadraticCurveTo(457, 210, 472, 236); ctx.quadraticCurveTo(493, 269, 460, 268); ctx.quadraticCurveTo(392, 252, 305, 325); ctx.fill() ctx.closePath(); ctx.fillStyle = "#037f7f" // ctx.fillStyle = "white" ctx.beginPath(); ctx.moveTo(345,222); ctx.quadraticCurveTo(366, 104, 459, 119); ctx.quadraticCurveTo(487, 121, 503, 148); ctx.quadraticCurveTo(401, 95, 345, 222); ctx.fill() ctx.closePath(); ctx.beginPath(); ctx.moveTo(352,242); ctx.quadraticCurveTo(385, 237, 425, 264); ctx.quadraticCurveTo(428, 274, 409, 233); ctx.quadraticCurveTo(428, 236, 446, 260); ctx.quadraticCurveTo(475, 288, 446, 243); ctx.quadraticCurveTo(437, 209, 391, 210); ctx.quadraticCurveTo(437, 144, 470, 157); ctx.quadraticCurveTo(428, 124, 380, 200); ctx.fill() ctx.closePath(); ctx.fillStyle = "#aa5500" ctx.fillRect(240,240,20,20); ctx.fillStyle = "#000055" ctx.beginPath(); ctx.moveTo(105,199); ctx.quadraticCurveTo(109, 368, 179, 395); ctx.quadraticCurveTo(175, 388, 237, 479); ctx.lineTo(270,461); ctx.lineTo(270,439); ctx.quadraticCurveTo(353, 430, 351, 386); ctx.fill() ctx.closePath(); ctx.fillStyle = "#550000" ctx.beginPath(); ctx.moveTo(280,314); ctx.lineTo(323,354); ctx.lineTo(312,390); ctx.quadraticCurveTo(221, 376, 258, 361); ctx.fill() ctx.closePath(); ctx.fillStyle = "#aa0000" ctx.beginPath(); ctx.moveTo(273,325); ctx.lineTo(304,357); ctx.lineTo(305,365); ctx.lineTo(310,371); ctx.lineTo(310,374); ctx.lineTo(303,376); ctx.lineTo(300,374); ctx.lineTo(287,374); ctx.lineTo(261,364); ctx.fill() ctx.closePath(); ctx.fillStyle = "#0055aa" ctx.beginPath(); ctx.moveTo(208,344); ctx.lineTo(227,357); ctx.lineTo(254,370); ctx.lineTo(287,380); ctx.lineTo(280,369); ctx.lineTo(276,365); ctx.lineTo(276,335); ctx.lineTo(299,350); ctx.lineTo(320,353); ctx.lineTo(320,278); ctx.lineTo(214,278); ctx.fill() ctx.closePath(); ctx.fillStyle = "#aa0000" ctx.beginPath(); ctx.moveTo(106,161); ctx.quadraticCurveTo(100, 205, 105, 233); ctx.quadraticCurveTo(110, 246, 128, 287); ctx.lineTo(143, 300); ctx.lineTo(143, 274); ctx.lineTo(148, 274); ctx.lineTo(183, 342); ctx.quadraticCurveTo(210, 370, 267, 312); ctx.quadraticCurveTo(273, 301, 267, 264); ctx.fill() ctx.closePath(); ctx.fillStyle = "#ff5500" // ctx.fillStyle = "#ffaa00" ctx.beginPath(); ctx.moveTo(160,139); ctx.quadraticCurveTo(123, 189, 136, 233); ctx.quadraticCurveTo(151, 276, 200, 270); ctx.quadraticCurveTo(230, 276, 211, 228); ctx.quadraticCurveTo(230, 256, 284, 245); ctx.quadraticCurveTo(230, 234, 182, 136); ctx.fill() ctx.closePath(); ctx.beginPath(); ctx.moveTo(276,238); ctx.quadraticCurveTo(341, 259, 352, 354); ctx.quadraticCurveTo(355, 387, 338, 447); ctx.quadraticCurveTo(336, 387, 338, 413); ctx.quadraticCurveTo(336, 428, 306, 413); ctx.quadraticCurveTo(336, 389, 306, 317); ctx.quadraticCurveTo(279, 274, 236, 265); 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 = "#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 = "#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	681,682
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgIfao-DPCww
Votes	1
Spin-Offs	0
Type	WEBPAGE
Width	400
Height	400
User Flagged	false
Origin Scratchpad	null
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, 1743306231043
Updated	9 days ago, 1743306231043
Source Deleted	unknown