How to put a image or Letter over image on a specific XY Coordinate

asked 2014-08-08 03:22:43 +0800

LuisVelez gravatar image LuisVelez

updated 2014-08-08 03:37:46 +0800


I need to put a image or letter over a image on a specific XY coordinate or clicked.

I have a picture of a car and I need to mark where the car is scratched or has a stroke.


delete flag offensive retag edit

2 Answers

Sort by ยป oldest newest most voted

answered 2014-08-09 14:33:51 +0800

Darksu gravatar image Darksu
1991 1 4

Hello LuisVelez,

A very interesting functionality that zk provides is the canvas component where you can draw dynamically shapes.

You can find more information at the following urls:



Best Regards,


link publish delete flag offensive edit

answered 2014-08-17 21:51:31 +0800

LuisVelez gravatar image LuisVelez

Thank you @Darksu.

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

I got this error message

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">
                org.zkoss.zul.Image img1 = new   org.zkoss.zul.Image();
                mycanvas.add(img1, 0, 0);
        <button label="Clear">
            <attribute name = "onClick">
                //clean the contents of this canvas

Also, I'm doing this:

<zk xmlns:h="xhtml">
    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);

<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


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

Any Idea??


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

1 follower



Asked: 2014-08-08 03:22:43 +0800

Seen: 15 times

Last updated: Aug 17 '14

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