ansaurus

Question

How to draw in web 2.0?

Answer 1

+4 A:

What you're talking about is most likely the HTML5 Canvas element

David Hedlund 2010-09-06 19:16:45

Thank you for quick answer, but links seems broken

Budda 2010-09-06 22:19:59

@Budda: really? works fine for me. But I see you've got the help you needed anyway =)

David Hedlund 2010-09-07 06:24:04

Answer 2

+1 A:

I suspect you've been hearing about the Canvas Element. You can get started with it here: http://en.wikipedia.org/wiki/Canvas_element

Good luck!

mkoistinen 2010-09-06 19:17:22

Thanks, got started :)

Budda 2010-09-06 22:19:43

Answer 3

+3 A:

A quick exemple of what you want to do:

<html>
  <head>
    <title>Hexagon canvas tutorial</title>
    <script type="text/javascript">
      function draw(){
        //first let's get canvas HTML Element to draw something on it
        var canvas = document.getElementById('tutorial');
        //then let's see if the browser supports canvas element
        if (canvas.getContext){
          var ctx = canvas.getContext('2d');

            //Pick Hexagon color, this one will be blue
            ctx.fillStyle = "rgb(0, 0, 255)";
            //let's start a path
            ctx.beginPath();
            //move cursor to position x=10 and y=60, and move it around to create an hexagon
            ctx.moveTo(10,60);
            ctx.lineTo(40,100);
            ctx.lineTo(80,100);
            ctx.lineTo(110,60);
            ctx.lineTo(80,20);
            ctx.lineTo(40,20);
            //fill it and you got your first Hexagon
            ctx.fill();

            //This one will be green, but we will draw it like the first one
            ctx.fillStyle = "rgb(0, 255, 0)";
            ctx.beginPath();
            ctx.moveTo(110,160);
            ctx.lineTo(140,200);
            ctx.lineTo(180,200);
            ctx.lineTo(210,160);
            ctx.lineTo(180,120);
            ctx.lineTo(140,120);
            ctx.fill();
        }
      }
    </script>
    <style type="text/css">
      canvas { border: 1px solid black; }
    </style>
  </head>
  <body onload="draw();">
    <canvas id="tutorial" width="300" height="300"></canvas>
  </body>
</html>

João Gala Louros 2010-09-06 19:45:08

Thanks a lot for quick example. If we go further and try to change hexagon color? Guess, we could catch "OnMouseOver" for canvas and if mouse cursor is inside of required hexagon... we need either redraw the same coordinates with another color... Or .. Is it possible to get already drawn object and just change its color?

Budda 2010-09-06 22:19:05

HTML5 canvas is interpreted as an image, so attaching events to his elements can be really tricky. I will have a look at this tomorrow an give you feedback if I find anything.

João Gala Louros 2010-09-06 23:03:32

I am very appreciate your help! Waiting for ideas! Thanks!

Budda 2010-09-07 01:51:31

I did some investigation and I didn't find any way to attach events to the drawn elements, neither make changes to the canvas elements without redrawing them. Basically if you want to change the hexagon color you have to clear canvas and redraw it with a new fill color.

João Gala Louros 2010-09-07 20:04:18

Thank you very much for you time and help!

Budda 2010-09-08 13:52:06

ansaurus

tags:

views:

answers:

How to draw in web 2.0?

related questions