Spartacus would easily be converted to canvas, but you would have to write to the pixelbuffer directly, which under JS can be slow if you dont know your way around array-buffers (untyped memory allocations) and UInt8Array pointers (which you connect to the buffer as a writer-channel).
The first thing you should do is to google "HTML5 Canvas tutorial" and start learning how the canvas works.
Next, CTRL+Click is your friend in the IDE. In a canvas app, inspect the RTL code while you are studying the HTML5 canvas tutorial (there are hundreds) - you will soon begin to understand how our wrapper works, and that it makes it easier by giving HTML5 and the DOM a "pascal face".
Finally, look up how to load files in SMS (see the website under documentation).
Essentially loading an image is super-easy:
//create an image object
//install an event handler (anonymous procedure here, you can define it elsewhere if you like)
//image is ready and loaded here!
// trigger the load. The onReady event will fire when it's loaded
With the image loaded, you can draw it using PutImage etc.. in the canvas.
To get the pixelbuffer for an image, that's a bit more tricky. There is a rule that you cant get the RGBA info directly from the image, only from a canvas.
So to get the data we want to draw the image to a canvas, then extract a "sprite" like buffer, like this:
function TGetImageData(Image:THandle): TW3ImageData;
if (Image) then
mContext := TW3GraphicContext.Create(Null);
mCanvas := TW3Canvas.Create(mContext);
Result := mCanvas.ToImageData;
The above code takes the handle of an image (like w3image1.handle), draws it to a canvas and then returns a TW3ImageData instance.
Through this new object you can access the RGBA pixel values.
Once you have modified the pixels, simply draw it to your canvas again (in a canvas application) using putImage etc..
This is basically how you would go about creating graphics demos. Loading in the images, drawing them directly -- or, if you want to play around with the pixels, pertaining to TW3ImageData and then copying (blitting) it onto the display canvas.
The reason Spartacus uses DIV elements and ordinary HTML objects, is because this gives you access to the GPU.
CSS3 is GPU powered and this is how we can rotate, move and push elements around quickly -- much faster than canvas (!)
Well -- hope it helps!
Note: Smart Mobile Studio forces you to write more -- but the code you write is much smaller than C#, visual basic and even Delphi for the same tasks.
And the benefit is that the code runs everywhere there is a modern browser
Sincerely I'm not familiar with architectural patterns you mentioned, at least not consciously My typical application with Delphi almost used no more than a few components. Main form, buttons for testing, maybe a demo for logs, and lot of back-buffers work and finally show to canvas... So basically I don't really need the visual designer too much, then I think the basic edition is perfect for me. And for the programming part... I do my best effort to make acceptable OOP.
Yes, more demos for Basic edition would be good. Also IMO the learning path should focus more on Basic edition.
I'll keep going...