70002171 How to use multi canvases on an HTML page

Summary

How to use multi canvases on an HTML page

Solution

User is able to attach and use several vdWebControls on same number of canvas elements of HTML5. Every canvas element with attached vdWebControl needs a vds file in order to be usable.

Bellow is a small example where we create three canvases and attach also three vdWebControls with different background colors and also three buttons which begin a user action line on each canvas.

   var vdcanvas1, vdcanvas2, vdcanvas3  ; // keep the vdcanvas control global for quick access inside the functions since it is the only one in the this page
		
        function vdrawInitPageLoad() {//Intiallize the web control inside this function.It must be called inside onload event of this page
            vdcanvas1 = vdmanager.AttachCanvas("canvas1"); //create a new web control attached it to the canvas1 elemement     			
            vdcanvas1.SelectDocument("vddocument.vds");// Opens a vddocument.vds from folder 			
            vdcanvas1.vdAfterOpenDocument = _vdAfterOpenDocument1;
        }     
        function _vdAfterOpenDocument1(){
		vdcanvas1.GetDocument().Palette.Background = [255, 0, 0, 255];// set bxcolor of vdcanvas1 to red
                            openSecondCanvas();
        }   
		
        function openSecondCanvas(){
		vdcanvas2 = vdmanager.AttachCanvas('canvas2');
		vdcanvas2.SelectDocument("vddocument.vds");
		vdcanvas2.vdAfterOpenDocument = _vdAfterOpenDocument2;
        }

        function _vdAfterOpenDocument2(){
		vdcanvas2.GetDocument().Palette.Background = [255, 255, 0, 255];// set bxcolor of vdcanvas2 to yellow
                            openThirdCanvas();
        }   
		
        function openThirdCanvas(){
		vdcanvas3 = vdmanager.AttachCanvas('canvas3');
		vdcanvas3.SelectDocument("vddocument.vds");		
		vdcanvas3.vdAfterOpenDocument = _vdAfterOpenDocument3;
        }

        function _vdAfterOpenDocument3(){
		vdcanvas3.GetDocument().Palette.Background = [0, 255, 0, 255];// set bxcolor of vdcanvas3 to green
        }   
		
        function line1() {
                            vdcanvas1.scriptCommand.line(null);
        }	

        function line2() {
                            vdcanvas2.scriptCommand.line(null);
        }	
        function line3() {
                           vdcanvas3.scriptCommand.line(null);
        }			
		

Send comments on this topic.