🖼 Code Editor w/Canvas Boilerplate (1,284b)

canvas-code.md

🖼 Code Editor w/Canvas Boilerplate (1,284b)

I often want to test some code using canvas a lot recently, so I made this template to jump into writing code for canvas of 1080x1080.

The canvas is also always centered and resized to fit the screen which is also very helpful when coding in this editor. It also runs in 60FPS and has S, C, T, R dwitter declarations.

Canvas, WASD/ZQSD/Arrow Key controls, fixed canvas pixels

Boilerplate Code: 251b

Bookmarklet Code: 1,284b

data:text/html,<meta charset=utf8><title>canvas</title><link rel=icon href='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 99 99"><text y="1em" font-size="72">🖼️</text></svg>'><textarea id=d spellcheck=false onkeypress=e=event;k=e.keyCode;(e.ctrlKey&&k==13)||k==10?f.srcdoc=d.value:0 style=resize:none;filter:invert(><canvas id=c><script>x=c.getContext`2d`,F=M=0,onload=U=e=>{requestAnimationFrame(U);if(F&&e<M-2)return;M=Math.max(M+1e3/60,e);T=F/60;if(T*60|0!=F++)T+=1e-6;E(T)};Z=onresize=_=>{W=c.width=innerWidth-19,H=c.height=innerHeight-19};Z()%0d%0du=r=d=l=0;X=Y=200%0donkeydown=onkeyup=e=>this[`lurd${"*".repeat(24)}l**r************l*d***u**u`[e.which-37]]=e.type[5]%0d%0dE=t=>{%0dx.fillStyle="blue";x.fillRect(0,0,W,H);x.font="1in'"%0dx.fillText('⚽',X+=l?-9:r?9:0,Y+=u?-9:d?9:0)%0d}</script></textarea><iframe id=f></iframe><p id=p style=position:fixed;bottom:1;color:white;background:black></p><script>D=null,d.onkeyup=d.onclick=n=>{clearTimeout(D),D=setTimeout(n=>{A=d.selectionStart,B=d.selectionEnd,V=d.value,E=V.substr(0,B).split`\n`,p.innerHTML=`Ln:${E.length}, Col:${E.pop().length+1}, ${A==B?"Pos:"+B:"Sel:"+(B-A)}, Len:${V.length}`},99)}</script><style>*{box-sizing:border-box;margin:0}textarea,iframe{width:50%;height:100%;vertical-align:top}

Canvas, WASD/ZQSD/Arrow Key controls, variable canvas pixels

Boilerplate Code: 360b (108b more than above)

• 1080x1080 fit-to-screen with gray background
• WASD/ZQSD/Arrow Key controls
• Moving Soccer ball

Bookmarklet Code: 1,379b

data:text/html,<meta charset=utf8><title>canvas</title><link rel=icon href='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 99 99"><text y="1em" font-size="72">🖼️</text></svg>'><textarea id=d spellcheck=false onkeypress=e=event;k=e.keyCode;(e.ctrlKey&&k==13)||k==10?f.srcdoc=d.value:0 style=resize:none;filter:invert(><canvas id=c><script>c.width=c.height=1080;x=c.getContext`2d`,F=M=0,onload=U=e=>{requestAnimationFrame(U);if(F&&e<M-2)return;M=Math.max(M+1e3/60,e);T=F/60;if(T*60|0!=F++)T+=1e-6;E(T)}%0d%0du=r=d=l=0;X=Y=200%0donkeydown=onkeyup=e=>this[`lurd${"*".repeat(24)}l**r************l*d***u**u`[e.which-37]]=e.type[5]%0d%0dE=t=>{%0d%0dc.width|=0;x.font="1in'"%0dx.fillText('⚽',X+=l?-9:r?9:0,Y+=u?-9:d?9:0)%0d%0d}</script><style>html,body{background:%23222;display:flex;justify-content:center;align-items:center;height:100%;margin:0}%23c{background:white;max-height:100%;max-width:100%}</textarea><iframe id=f></iframe><p id=p style=position:fixed;bottom:1;color:white;background:black></p><script>D=null,d.onkeyup=d.onclick=n=>{clearTimeout(D),D=setTimeout(n=>{A=d.selectionStart,B=d.selectionEnd,V=d.value,E=V.substr(0,B).split`\n`,p.innerHTML=`Ln:${E.length}, Col:${E.pop().length+1}, ${A==B?"Pos:"+B:"Sel:"+(B-A)}, Len:${V.length}`},99)}</script><style>*{box-sizing:border-box;margin:0}textarea,iframe{width:50%;height:100%;vertical-align:top}

The Canvas Boilerplate w/fixed canvas pixels

<canvas id=c><script>x=c.getContext`2d`,F=M=0,onload=U=e=>{requestAnimationFrame(U);if(F&&e<M-2)return;M=Math.max(M+1e3/60,e);T=F/60;if(T*60|0!=F++)T+=1e-6;E(T)};Z=onresize=_=>{W=c.width=innerWidth-19,H=c.height=innerHeight-19};Z()

u=r=d=l=0;X=Y=200
onkeydown=onkeyup=e=>this[`lurd${"*".repeat(24)}l**r************l*d***u**u`[e.which-37]]=e.type[5]

E=t=>{

x.fillStyle="blue";x.fillRect(0,0,W,H);x.font="1in'"
x.fillText('⚽',X+=l?-9:r?9:0,Y+=u?-9:d?9:0)

}</script>

The Canvas Boilerplate w/variable canvas pixels

<canvas id=c><script>c.width=c.height=1e3;x=c.getContext`2d`,F=M=0,onload=U=e=>{requestAnimationFrame(U);if(F&&e<M-2)return;M=Math.max(M+1e3/60,e);T=F/60;if(T*60|0!=F++)T+=1e-6;E(T)}

u=r=d=l=0;X=Y=200
onkeydown=onkeyup=e=>this[`lurd${"*".repeat(24)}l**r************l*d***u**u`[e.which-37]]=e.type[5]

E=t=>{

c.width|=0;x.font="1in'"
x.fillText('⚽',X+=l?-9:r?9:0,Y+=u?-9:d?9:0)

}</script><style>html,body{background:#222;display:flex;justify-content:center;align-items:center;height:100%;margin:0}#c{background:white;max-height:100%;max-width:100%}

learning-canvas-functions.html

<style>html,body{background:#222;display:flex;justify-content:center;align-items:center;height:100%;margin:0}#c{background:white;max-height:100%;max-width:100%}</style><canvas id=c width=1080 height=1080></canvas><script>x=c.getContext`2d`,lfr=1,S=Math.sin,C=Math.cos,T=Math.tan,R=(r,g,b,a=1)=>`rgba(${r|0},${g|0},${b|0},${a})`,t=f=nfm=0;z=t=>{

c.width|=0

// filled rectangle
x.fillStyle="green"
x.fillRect(250, 250, 500, 500)

// rectangle lines
x.strokeStyle="yellow"
x.lineWidth = 10;
x.strokeRect(270, 270, 460, 460)

// rounded rectangle
x.fillStyle="red"
x.beginPath();
x.roundRect(300, 300, 400, 400, 50)
x.fill();
x.strokeStyle="blue"
x.lineWidth = 14;
x.stroke() //stroke after fill, so they don't overlap

// centered text
x.font="1in'"
x.textAlign="center"
x.fillText('⚽',500,500)

// rounded lines
x.beginPath();
x.moveTo(20, 20);
x.lineWidth = 30;
x.lineJoin = "round"
x.lineCap = "round"
x.lineTo(100, 100)
x.lineTo(80, 200)
x.lineTo(100, 300)
x.lineTo(200, 200)
x.lineTo(200, 100)
x.stroke()

// circle
x.beginPath()
x.arc(500,600,50,0,2*Math.PI)
x.fillStyle="purple"
x.fill()

// weird experiment with `arc`
x.beginPath()
x.arc(500,900,50,0,1.6)
x.arc(400,950,50,0,1.6)
x.arc(300,1000,50,0,1.6)
x.fillStyle="purple"
x.fill()
x.stroke()

};loop=fTime=>{requestAnimationFrame(loop);if(lfr&&fTime<nfm-2)return;nfm=Math.max(nfm+1e3/60,fTime);t=f/60;if(t*60|0!=f++)t+=1e-6;z(t)};loop()</script>