Back to Forum
Canvas Image Manipulation | Sampling Images
Boban posted 6 years 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's profile photo
chris posted 6 years 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!

B
Boban posted 6 years ago

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

Want to participate?

Create a free Chris Courses account to begin

Providing the lift to launch your development career

© 2026 Chris Courses. All rights reserved.