Hi all. Building a tool where the user can specify a width and height for a rectangle, then choose from a pre-set selection of square sizes to fill in that rectangle (adjusting rectangle to fit as needed). User can also colour in each square dynamically.
Am thinking Canvas would be the ideal tool to do this in, but am wondering if something else, such as SVG, would be better?
Thanks!
Hi @GeorgeLangley - welcome to the forums 
How many rectangles or squares will you have at most? If the number is going to be less than 100, using SVGs or maybe even div elements may have easier. If you ever want to make the squares or rectangles interactive (you can click it, drag it, etc.), being in the DOM with SVGs or div elements makes that a bit easier as well.
Do you have a screenshot or mockup of what you are trying to build?
Cheers,
Kirupa
It could be approaching 1,000 squares, at the largest anticipated dimensions divided by the smallest square.
Have uploaded a very generic concept image, but user would enter in width/height. Then select a square size (radio buttons), to draw resulting grid.
The colouring is being worked out, but yes, am assuming that each square will need to be a clickable item. Was thinking an ID for each square, using a basic alpha-numeric grid (ie. A1, A2 A3, B1, B2, B3, etc.)
Thanks.
If you decide to go with canvas, you might want to use a library like PixiJS which will provide you solutions for implementing interactivity, z-sorting and other features.
1 Like
@StridBR - welcome back after, according to the banner right above your post, 13 years! 
@GeorgeLangley - I would suggest going with the DOM then. Modern browsers can easily handles a few thousand DOM elements easily, so you having a 1000 squares is perfectly doable.
Perf tip #1: Here is a tutorial I wrote on how to quickly add 1000 items into the DOM (with each item having 2 DOM elements, for a total of 2000 DOM elements)!
Perf tip #2: For the click, you want to listen to it on a common parent element. Adding a click event handler to each element will slow things down. This tutorial walks through how to do that:
1 Like
