How to draw an image on canvas?

asked 2014-08-17 22:09:01 +0800

LuisVelez
12

I'm having problems using canvas. I can't put a image on it.

I got this error message(Using Canvas4Z in https://code.google.com/p/canvas4z/downloads/list)

setAttr Failed to execute 'drawImage' on 'CanvasRenderingContext2D': No function was found that matched the signature provided. (TypeError)

This is my .zul

<window id="win">   

<canvas id="mycanvas" width="780px" height="300px" onClick='alert(event.x +" "+ event.y)' />         
        <button id="btn" label="Draw Rectangle"  >
            <attribute name="onClick">
            <![CDATA[              
                org.zkoss.zul.Image img1 = new   org.zkoss.zul.Image();
                img1.setSrc("/img/LatIzq.png");
                mycanvas.add(img1, 0, 0);
            ]]>                   
            </attribute>
        </button>     
        <button label="Clear">
            <attribute name = "onClick">
                //clean the contents of this canvas
                mycanvas.clear();
            </attribute>
        </button>        
    </window>

Also, I'm doing this (just HTML5):

<zk xmlns:h="xhtml">
<script><![CDATA[
    window.onload = function () {
        var canvas = document.getElementById('testCanvas');
                    var img = new Image();
                    //indico la URL de la imagen
                    img.src = '/img/LatIzq.png';

        var ctx = canvas.getContext('2d'); // get Canvas context
        /*ctx.strokeStyle = '#AAAAAA'; // line color
        ctx.lineWidth = 3; // line width
        ctx.beginPath(); // start
        ctx.moveTo(30, 30); // start point
        ctx.lineTo(350, 350); // end point
        ctx.stroke(); // draw line*/
                    img.onload = function(){
                       //incluyo la imagen en el canvas
                       ctx.drawImage(img, 1, 1);
                    }
                    //ctx.drawImage(img, 1, 1);
    }
]]></script>

<div />
<h:canvas id="testCanvas" height="500px" width="780px" style="border: 5px solid #3648AE;" onClick='alert(event.x +" "+ event.y)'>
    current browser does not support canvas
</h:canvas>
</zk>

In the last zul I don get any error message but can't see the image on canvas

Any Idea??

Thanks