Tutorial Webpage for

Lecture Cloud- and Web-Technologies




Please use user and password as given in the lecture! Please copy the editor's content, as it will be lost due to reloading of the page for the purpose of login.



PHP - Canvas Draw Code Generator

It seems to be that the used PHP interpreter in Javascript has problems with recursion in OOP. Please use the server-based PHP execution (after login) or check out PHPFiddle to run your code if you have any problems with the used PHP interpreter in Javascript.
Your task is to model PHP classes, which represent rectangle and circle drawing objects as well as a container for several drawing objects, which could be besides rectangles and circles again containers. The drawing objects should be able to output the graphic operations to Javascript, such that a whole scene is drawn when the Javascript is executed. Only basic graphic operations for drawing a rectangle and a circle should be used in the output Javascript code. The drawing objects as well as the containers can be moved to a new position and also scaled by a factor.
A test scenario is given, where a train under a sun is initialized. This scene should be drawn with no scaling factor (in canvas 1), with scaling factor 10 (in canvas 2) and additionally with the train moved to (50,0) (in canvas 3).


Please use the following editor for your exercise. You can run the content of the editor by clicking on the tab 'Run'...

Output of Editor Content

The result of running the editor content is as follows:

Output of the Solution

The output of the solution is as follows:


Please have a look at the solution only after you have finished working on your own solution. Otherwise the learn effect is much less.