june / progress-pride-flag.nv

|| :: create a 400 by 400 canvas :: draw the trans pride flag |:: draw the trans pride flag| :: clear the canvas to black :: draw a 360 by 360 lightblue rectangle at 20 20 :: draw a 360 by 250 pink rectangle at 20 80 :: draw a 360 by 100 white rectangle at 20 150 :: draw a black triangle at 20 20 20 380 200 200 |:: clear the canvas to $color| :@graphics: clear $color |:: draw a $width by $height $color rectangle at $x $y| :@graphics: draw rect $x $y $width $height $color |:: draw a $color triangle at $x1 $y1 $x2 $y2 $x3 $y3 | :@graphics: draw triangle $x1 $y1 $x2 $y2 $x3 $y3 $color |:: create a $width by $height canvas :canvas initialized:?| :: set the canvas resolution to $width by $height |:: create a $width by $height canvas| :: initialize the canvas :: set the canvas resolution to $width by $height |:: set the canvas resolution to $width by $height :canvas initialized:?| :@graphics: set-resolution _ $width $height |:: set the canvas resolution to $width by $height| :error: you need to initialize the canvas first |:: initialize the canvas :canvas initialized:?| |:: initialize the canvas| :@graphics: canvas init canvas :canvas initialized: |------------------------------------------------------------------------| |- The code below this comment modifies the playground to add a canvas. -| |------------------------------------------------------------------------| || :@include: ( lib/rpn.nv lib/nv/meta.nv lib/platforms/browser_game.nv lib/platforms/browser_dom.nv ) ||:DOM: ( <query canvas <style center > > <query #code <style display = none > <query #code-actions < button innerText = [Edit Code] id = reset on click reset > > ) |:click: reset| :DOM: ( <query #code <style display = unset > > <query #reset @remove > ) |:DOM: @remove :current dom element: $el?| ⁝@js⁝ $el .remove(); |:DOM: center :current dom element: $el?| :DOM: ( display = block marginLeft = auto marginRight = auto ) |:@graphics: draw rect $x $y $w $h $color| :@graphics.draw: rect $x $y $w $h $color |:@graphics: draw triangle $x1 $y1 $x2 $y2 $x3 $y3 $color| :@graphics.draw: triangle $x1 $y1 $x2 $y2 $x3 $y3 $color |:@graphics.draw: rect $x $y $w $h $color :@@canvas context: $ctx?| ⁝@js⁝ $ctx .fillStyle = $color; $ctx .fillRect( $x, $y, $w, $h ); |:@graphics.draw: triangle $x1 $y1 $x2 $y2 $x3 $y3 $color :@@canvas context: $ctx? | ⁝@js⁝ $ctx .fillStyle = $color; $ctx .beginPath(); $ctx .moveTo($x1 , $y1 ); $ctx .lineTo($x2 , $y2 ); $ctx .lineTo($x3 , $y3 ); $ctx .fill();