CHANNELS:

All
B
Canvas Image Manipulation | Sampling Images
Canvas
Boban posted a month ago

Hey Chris,Hope you're all well.At the 9:11 minute mark you grab another code, which you place into a new file called .Dot.jsI'm wondering is it possible to set up this code within the first script which we have, and if so where would I place it within the code?Thanks,Bob

chris posted a month ago
Best Reply

Hey Bob, yes for sure, if you're not using a module bundler to import and export files, you can inline the Dot.js code into your main .js file.

All you'd do is change Dot.js here:

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()
  }
}

To be inline-able like:

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()
  }
}

So basically, get rid of the export default, place the class in whatever file you'd like to use it, and now you can use it just like in the video.

Let me know if that helps!

0
B
Boban posted a month ago

Thanks heaps on your response Chris. Hope all is going well.

0

Want to participate?

Create a free Chris Courses account to begin

or
Sign In
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.