how can I add a dynamically created 'canvas' - object to the page?

OL Connect Professional Designer
1

To create some very customized output, I need to create and add a ‘canvas’ object to a template.

The following code needs to be executed:

        var canvas = document.createElement('canvas');
        canvas.setAttribute('width', 100);
        canvas.setAttribute('height', 100);
        var ctx = canvas.getContext('2d');
        ctx.fillStyle = 'rgb(0,0,0)';
        ctx.strokeRect (25,25,10,10);
        document.body.appendChild(canvas);

In the scripteditor, I get the information that “document” is unknown.

How do I have to modify the code to get it work?

2

Hello Thomas,

The issue here is that you’re trying to display something in the browser but you’re doing it in the server-side version of the scripts. If you, instead, create a new __Java__script resource from the Resources pane, then you will get exactly the same capabilities you would in your browser. If you take a look at some of the Foundation Web template wizards (such as the Jumbotron), you’ll see that the javascript resources include jQuery and some other javascript libraries: these scripts are added to the <head> tag of the generated output. This works for print and web contexts only.

Thinks of Scripts as something like node.js, or php, or ASP.net - it’s run on the server, not in the browser.

3

Thanks - can you provide an example file for this, too?

4

Hi Thomas,

As complement to what Evie has said, if you want to try your example given above in your question, you can:

create and add a “canvas” object to a template: use script in the panel scripts

in Selector write body
check Selector

and in the editor write :

results.append('&lt;canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"&gt;&lt;/canvas&gt;');

to draw graphic on this canvas, you can create a new javascript in the folder Javascript in Resources and write these instructions:

$(document).ready(function(){
    var ctx = $("#myCanvas").get(0).getContext('2d');
    ctx.fillStyle = 'rgb(0,0,0)';
    ctx.strokeRect (25,25,50,50);    
});

don’t forget to save the javascript file and include it in your web section.

Note: You can’t see the result in preview, But only in live or clicking on Preview HTML icon in the rubon of the designer

I hope that this help you

5

Hi Fadila,

it’s a step further… but still something is wrong.
I can see the appended canvas in the output, but the code in the JavaScript file seems not to be executed.
The JavaScript file is included for the section (checkmarked there ) in Printing context; it was the default newly created template.
I am using the Preview HTML-Icon first wih IE now with FF - only can see the border of the canvas.

If you have a complete template file that works on your system, I’d be glad to get it.

Thanks in advance.

EDIT: in the console from FF I get a message saying:

ReferenceError: $ is not defined

Do I have to include anything else before?

6

Hello Thomas,
Canvas are used in HTML5 for graphics and animation on the web. So use your example in a web template or context