KUMALEON Coding Challenge Template (Canvas2D)

Last updated

2022.6.17

・JS/HTML/CSS

JavaScript HTML CSS
Resources

const startTime = Date.now()
let pixelRatio = 1
let radius
 
const canvas = document.createElement('canvas')
const context = canvas.getContext('2d')
 
// pass a canvas element.
// If the canvas is not square, the center will be cropped.
kumaleon.setCanvas(canvas)
 
const draw = (radiusRatio, timeOffest, strokeStyle) => {
  context.strokeStyle = strokeStyle
  context.lineWidth = 1 * pixelRatio
  const currentTime = Date.now()
  const time = (currentTime - startTime) * 0.2 + timeOffest
  const h = (Math.sin(time * 0.0006) + 1) * 3
  const n = 5 + (Math.sin(time * 0.0014) + 1) * 2