Hi guys,

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:

  1. User selects item from dropdown box (which is populated via php, which draws from specific mySQL tables).
  2. 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.
  3. When all the required information has been found, a JavaScript statement is created to actually draw everything onto the canvas.
  4. 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:

  • Simply append the php generated JavaScript (which is quite lengthy) onto the canvas element.
  • 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,