Sunscreen
Mandalatron
// HTML
<canvas
id="canvas"
width="500"
height="500"
/>
// JS
let canvas = document.getElementById('canvas')
let ctx = canvas.getContext('2d')
ctx.fillStyle = 'red'
ctx.fillRect(50, 50, 100, 100)
ctx.strokeStyle = '#00ff00'
ctx.lineWidth = 5
ctx.strokeRect(200, 50, 100, 100)
ctx.fillStyle = 'rgba(255,255,255, 0.25)'
ctx.fillRect(350, 50, 100, 100)
ctx.fillStyle = 'red'
ctx.beginPath()
ctx.moveTo(50, 50)
ctx.lineTo(150, 50)
ctx.lineTo(150, 150)
ctx.closePath()
ctx.fill()
ctx.beginPath()
ctx.arc(100, 100, 50, 0, 2 * Math.PI)
ctx.fill()
ctx.beginPath()
ctx.arc(250, 100, 50, 0, 1 * Math.PI)
ctx.fill()
ctx.beginPath()
ctx.arc(400, 100, 50, 0, 0.5 * Math.PI)
ctx.fill()
const speed = 100 // per second
function draw(elapsed) {
let seconds = elapsed / 1000
let x = seconds * speed % 400
ctx.clearRect(0, 0, canvas.width, canvas.height)
ctx.fillRect(x, 50, 100, 100)
requestAnimationFrame(draw)
}
requestAnimationFrame(draw)
const ctx = canvas.getContext('2d')
ctx.fillStyle = 'red'
ctx.fillRect(0,0,10,10) // red
ctx.fillRect(10,0,10,10) // red
ctx.fillRect(20,0,10,10) // red
ctx.fillStyle = 'blue'
ctx.fillRect(30,0,10,10) // blue
Settings are remembered for all drawing functions until changed.
function drawSquare() {
ctx.fillRect(50, 50, 100, 100)
}
drawSquare()
ctx.translate(150, 0)
drawSquare()
ctx.translate(150, 0)
drawSquare()
function drawSquare(x, y) {
ctx.save() // stash a snapshot of unaltered context
ctx.translate(x, y) // alter the context
ctx.fillRect(0, 0, 100, 100) // draw something
ctx.restore() // undo all context changes since last save()
}
drawSquare(50, 50)
drawSquare(200, 50)
drawSquare(350, 50)
function drawCelestialBody(r, dist, color) {
ctx.save()
// orbital speed is a function of distance
let orbitSpeed = 1 / Math.pow(dist, 2)
// Rotate around
ctx.rotate(elapsed * orbitSpeed * SPEED)
// Move "UP" from the center
ctx.translate(0, dist)
// Draw the celestial body at the origin
ctx.beginPath()
ctx.arc(
0, 0, // x, y
r, // radius
0, 2 * Math.PI // full circle
)
// Set the color and fill it in!
ctx.fillStyle = color
ctx.fill()
crx.restore()
}