Canvas Image Manipulation

3 lessons

·

37:08 minutes

·

Intermediate

Video Thumbnail

Sign up for a plan to instantly unlock all premium lessons.

Sampling Images

Published 2 months ago

src/canvas.js
const canvas = document.querySelector('canvas')
const c = canvas.getContext('2d')

canvas.width = innerWidth
canvas.height = innerHeight
src/index.html
<img
  src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/35418/charizard.png"
  crossorigin="Anonymous"
/>
src/Dot.js
export default class Dot {
  constructor(x, y, r, g, b, imageX, imageY) {
    this.x = x
    this.y = y
    this.r = r
    this.g = g
    this.b = b
    this.imageX = imageX
    this.imageY = imageY
  }

  draw(c) {
    c.beginPath()
    c.arc(this.x, this.y, 2, 0, 2 * Math.PI, false)
    c.fillStyle = 'rgb(' + this.r + ', ' + this.g + ', ' + this.b + ')'
    c.fill()
  }
}

Comments

Want to participate?

Create a free Chris Courses account to begin

or
Sign In

No comments yet, be the first to add one

Cheat Sheet Preview

Download The Official Chris Courses HTML5 Canvas Cheat Sheet

Essential canvas syntax at your fingertips.

Download Cheat Sheet

Providing the lift to launch your development career

© 2020 Chris Courses. All rights reserved.