Caanvas overlay on webix control.

Webix JS
1

Hi,

I am trying to display an image using { css: “image”, template:img, width:272, height:272, id:“chart1”,data:{src:“img/chart.bmp”}} and using the canvas for overlay few texts onto this image. I am setting canvas location with absolute coordinate so that it gives effect of overlay on image.

<canvas id='chart1Canvas' width='264' height='264'></canvas>
	
canvas = document.getElementById("chart1Canvas");
ctx = canvas.getContext("2d");
ctx.fillStyle = "#0000FF";
ctx.font = "18px Arial";
ctx.fillText("As",125,70);

CSS for canvas....

#chart1Canvas {
            margin: 0px;
            padding: 0px;
	    left: 15px;
	    top: 77px;
	    position: absolute;
            border: thin inset #aaaaaa;
         }

i am facing an issue with this method. when i try to scroll down my page canvas remains at the same place in window while other webix controls move as expected. when i remove all webix controls from my page then canvas moves with scroll event. Please suggest me a way out. I am really stuck with this problem.

2

You need to set position relative to the template view

/*"image" - css class that you have set on template*/
.image .webix_template{
   position:relative;
}