Hey Chris, I really enjoyed the course about the Canvas Image Manipulation.
Will it be too much to ask for you to help me make the image we are drawing bigger by increasing the space between the x and y coordinates of the Dots bigger?
My guess is that something here needs to be changed but I don't know what.
for (let i = 0; i < imageData.length; i += 4) {
if (imageData[i] === 0) continue;
const x = (i / 4) % img.naturalWidth;
const y = Math.floor(Math.floor(i / img.naturalWidth) / 4)
if (x % 5 === 0 && y % 5 === 0) {
pixels.push({
x,
y,
r: imageData[i],
g: imageData[i + 1],
b: imageData[i + 2]
})
}
}In the end I guess I am asking is how to make the space between the x and y coordinates of the Dots bigger (for example 2px) which will result in making the picture bigger (more stretched out ) . I hope you understand my question since english is not my native language.
Have a nice day!
So where you're using the module and dividing by five, if you increase that number, you're going to push less pixels per row / column. When you push less pixels, you can increase the size of the dots by editing their radius value to make them bigger by default. That would take place wherever you're using new to create new dots.
Let me know if that's what you're looking for and if that helps! :)
Sorry Chris for the late reply. I wasn't looking for that actually. I want to increase the space between the dots (make them further apart). That will result in increasing the image width and image height.
Have a great day!
Want to participate?
Create a free Chris Courses account to begin
Download The Official Chris Courses HTML5 Canvas Cheat Sheet
Essential canvas syntax at your fingertips.
Download Now