0

How to draw an image on canvas?

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

LuisVelez gravatar image 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

delete flag offensive retag edit

1 Answer

Sort by ยป oldest newest most voted
0

answered 2014-08-23 19:04:43 +0800

Darksu gravatar image Darksu
1991 1 4

Hello LuisVelez,

You could combine Zk with an Html5 Canvas Image Loader using the example below:

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      function loadImages(sources, callback) {
        var images = {};
        var loadedImages = 0;
        var numImages = 0;
        // get num of sources
        for(var src in sources) {
          numImages++;
        }
        for(var src in sources) {
          images[src] = new Image();
          images[src].onload = function() {
            if(++loadedImages >= numImages) {
              callback(images);
            }
          };
          images[src].src = sources[src];
        }
      }
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      var sources = {
        darthVader: 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg',
        yoda: 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg'
      };

      loadImages(sources, function(images) {
        context.drawImage(images.darthVader, 100, 30, 200, 137);
        context.drawImage(images.yoda, 350, 55, 93, 104);
      });

    </script>
  </body>
</html>

For more information you can use the link below:

http://www.html5canvastutorials.com/

Best Regards,

Darksu

link publish delete flag offensive edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow
1 follower

RSS

Stats

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

Seen: 31 times

Last updated: Aug 23 '14

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More