How Could One Write This Basic PAINT Statement in JavaScript?

Question

In BASIC there is a command called PAINT that looks like this: PAINT (column, row), color, color-stop It takes x/y coordinates as a starting place and begins filling it and the surrounding pixels in with color until it reaches the color defined in color-stop. An example with values might be: PAINT (200, 400), 4, 6 QuickBasic uses 0-15 to represent different colors. Each of these colors has an equivalent hexadecimal value. In the lines preceding the PAINT there are usually lines, circles, etc. drawn of a different (the color-stop) color which set boundaries for how much screen space the PAINT command can actually utilize. Any ideas on how to accomplish something similar in JavaScript?

Answer 1

In Javascript, we define a function as such:

function myFunction(arg1, arg2) {

// ... stuff here

}

Here, "myFunction" is the name of the function we have declared, and arg1/arg2 are the arguments passed into the function. Since the BASIC function takes four arguments, we would want our function signature to look like this:

function PAINT(column, row, color, colorStop) {

// ...

}

I'm not sure what column and row refer to, but if we assume they are x,y pixels on the screen, we can use the Canvas API https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API to draw on an HTML <canvas> element.