html canvas - draw rect

 

 

const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')
canvas.width = 400
canvas.height = 100
canvas.style.backgroundColor = 'gray'

// tistory content div
const content = document.getElementsByClassName('entry-content')[0]
if (content) {
  content.appendChild(canvas)
} else {
  // mobile
  const view = document.getElementsByClassName('blogview_content')[0]
  view.appendChild(canvas)
}

ctx.fillStyle = 'red'
ctx.fillRect(10, 10, 100, 50)

ctx.fillStyle = '#00FF00'
ctx.fillRect(120, 10, 30, 30)

ctx.shadowBlur = 20
ctx.shadowColor = 'blue'
ctx.fillStyle = '#880088'
ctx.fillRect(160, 10, 70, 50)

ctx.shadowBlur = 10
ctx.shadowOffsetX = 20
ctx.shadowColor = 'black'
ctx.fillStyle = '#008888'
ctx.fillRect(240, 10, 60, 40)

ctx.shadowBlur = 10
ctx.shadowOffsetY = 20
ctx.shadowColor = 'rgb(234,45,123)'
ctx.fillStyle = 'rgba(34,123,234,0.6)'
ctx.fillRect(326, 10, 40, 50)

 

 

tistory 본문 (<div class='entry-content'></div>) 에 canvas 붙임

 

(모바일은 blogview_content)