A Blank Canvas

Another week, another technical challenge to overcome and show who’s boss. No surprise, the technical challenges reign supreme in this household, but with every battle I emerge a stronger developer with more grey hair. This week, I began a challenge for an exciting company that built an extension for screen recordings and editing videos. Honestly, it is a little out of my wheelhouse but instead of thinking of it as an impossible task for a novice programmer such as myself, I corrected myself and called it a challenging task that will teach me invaluable skills.

Without divulging too much information so as not to give away the challenge or company that it is for, I will try to explain the objective slightly differently than the task given. I must create a SPA with a canvas to add different shapes that can then be modified/deleted when selected. The shapes’ size can be altered along with the color of the shape, and can also be moved throughout the canvas.

For now, I decided to stick with Vanilla JS to create the feature and tackle the initial tasks such as adding shapes. I couldn’t recall if I worked with a canvas element on a webpage before, so the concept was fairly new to me. Setting it up was simple though, making sure to add borders so the webpage didn’t appear blank. Then I added a button to be able to add a rectangle to the canvas.

After I completed the basic tasks, I attempted to set up JS to handle the actions on the page. I needed to refresh my memory with past projects to develop the best approach to connecting the webpage with JS. Setting up the event listeners was like riding a bike, and once that rectangle appeared in the canvas, I was over the moon and felt nothing could stop me.

Then I tried to select the rectangle element to alter it, and I was brought back to Earth. Using the element inspector in Chrome Dev Tools to study the element, I realized that only the canvas could be selected and not the rectangle. So how was it possible to select the shape, let alone to alter it or move it across the canvas. My past projects and experience couldn’t help me here, I needed to go searching and learn more about manipulating elements in a canvas.

One approach I discovered was to verify whether the mouse position was within the X or Y axis of the shape. What I thought was that meant I had to separate some of my actions. At first, I had both the canvas and button elements within the same div container, but decided to separate the two to handle different event listeners, primarily when an element was clicked as opposed to the button to add the element.

class Buttons {
    static canvas = document.getElementById("canvas")

    constructor() {
        this.attachClickEventListener()
    }

    attachClickEventListener() {
        document.addEventListener("click", this.handleOnClick);
    }

    handleOnClick = (e) => {
        if (e.target.id == "add_rectangle") {
            new Shapes()
        }
    }
}

class Shapes {
    static container = document.getElementById('canvas_container')
    static canvas = document.getElementById("canvas")

    constructor() {
        this.shapes = [];
        this.render()
    }

    render() {
        const ctx = canvas.getContext('2d');
        ctx.fillStyle = "green";
        ctx.fillRect(10, 10, 150, 100)
        this.shapes.push(ctx)
    }

}

I can understand the concept of comparing an element’s position to the mouse position, and iterating through the elements in the canvas to select the correct one. But if the button class was separate from the canvas class, it didn’t seem right to create shapes within the button class. So I literally just realized that when the button is clicked it will call a new Shape class to be created, with the element then being pushed into the empty array. I wonder if it’s possible to assign a unique id or value for when shape is selected.

So far, I have a canvas and a button that will add a rectangle, with the element then stored in an array. My next task will be to select the element and add lots of nice features like changing color when it is being hovered over or displaying a form to alter the color or size. I’m considering developing a function to randomize the color and position of each shape. It has been challenging so far but I’ve already learned a lot. Next week, I hope to fully understand selecting these elements and being able to drag them across the canvas.