October 29th, 2013, 07:05 AM
I'm new to the interaction between all these components (especially the HTML5 Canvas element), and am wondering what the best practice is for the following scenario.
I'm currently developing a webpage that allows people to customise a product in various ways.
On the left hand side of the screen is a canvas element, and on the right hand side is a pretty long list of customisation options.
As you might expect, to begin with the canvas shows a pretty plain looking image, and as the options are played with, the image is tweaked (through overlaying other "component" images ontop of one another), to provide a live view of the bespoke product.
None of that is really a problem (although it is a lot of work). The projects current workflow is as follows:
- User selects item from dropdown box (which is populated via php, which draws from specific mySQL tables).
- Once the item is selected, an AJAX post is made to a php file, to retrieve all the images and co-ordinates that are required to make up the canvas element.
- The php file sends this data back to the AJAX function, and the canvas is updated.
The only thing I'm unsure about, is whether it's considered best practice in this situation to:
- Re-write a separate .js file, and then update the canvas from that.
I'm thinking the latter choice is probably the way to go, but I'm a little unsure as this is pretty much foreign territory to me.
Can anyone advise? Preferably with any thought process behind your opinion?
Thanks a lot,