CODEWITHSUNDEEP
htmlhtml5-canvas
user2455149
user2455149

Reputation: 1

Aligning of Canvas using HTML5

I am using HTML5. Can somebody please help me to align the canvas on the webpage. Initially I used div tag for placing an arrow.Now I need to get an ellipse after the arrow. I used canvas tag. But it didn't work. Can anyone guide me? I need to place multiple objects and so I used canvas. Thank you.
In div tag, 

div id="container" align='left'

In canvas tag, 

 canvas id="myCanvas" left="210" top="210" width="1000" height="200"

Upvotes: 0

Views: 229

Answers (2)

markE
markE

Reputation: 105045

How to draw ellipses connected by arrow lines

Of course whatever you want to drag/draw into the ellipses is determined by your project requirements.

enter image description here

This function draws an ellipse given top, left and width.

A few notes:

  • This is actually it’s an approximation of an ellipse—not a mathematical ellipse.
  • The height is determined by the function.
  • The function returns the endingX and centerY of the ellipse (useful when attaching connectors)

.

    function drawEllipse(x,cy,width) {
      // x=left, cy=vertical center of ellipse
      // note: just an approximation of an ellipse
      var height=width*0.40;
      ctx.beginPath();
      ctx.moveTo(x, cy);
      ctx.bezierCurveTo(
        x+width/2*.05, cy-height,
        x+width-width/2*.05, cy-height,
        x+width, cy);
      ctx.bezierCurveTo(
        x+width-width/2*.05, cy+height,
        x+width/2*.05, cy+height,
        x, cy);
      ctx.closePath();  
      ctx.stroke();
      return({x:x+width,y:cy});
    }

This function draws a connecting line with optional starting and ending arrowheads

    function drawConnector(startX,startY,endX,endY,hasStartArrow,hasEndArrow){
        ctx.beginPath();
        ctx.moveTo(startX,startY);
        ctx.lineTo(endX,endY);
        ctx.stroke();
        if(hasStartArrow){
            var startRadians=Math.atan((endY-startY)/(endX-startX));
            startRadians+=((endX>startX)?-90:90)*Math.PI/180;
            drawArrow(startX,startY,startRadians);
        }
        if(hasEndArrow){
                var endRadians=Math.atan((endY-startY)/(endX-startX));
                endRadians+=((endX>startX)?90:-90)*Math.PI/180;
                drawArrow(endX,endY,endRadians);
        }
    }

    function drawArrow(x,y,radians){
        ctx.save();
        ctx.beginPath();
        ctx.translate(x,y);
        ctx.rotate(radians);
        ctx.moveTo(0,0);
        ctx.lineTo(6,20);
        ctx.lineTo(-6,20);
        ctx.closePath();
        ctx.fill();
        ctx.restore();
    }

Here is code and a Fiddle: http://jsfiddle.net/m1erickson/vnvhQ/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; padding:15px; }
    canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // holds the right/vertical-center point of the last ellipse or connector 
    var point;

    point=drawEllipse(20,50,100);
    point=drawConnector(point.x,point.y,250,100,true,true);
    point=drawEllipse(point.x,point.y,100);


    // x=left, cy=vertical center of ellipse
    function drawEllipse(x,cy,width) {
      // note: just an approximation of an ellipse
      var height=width*0.40;
      ctx.beginPath();
      ctx.moveTo(x, cy);
      ctx.bezierCurveTo(
        x+width/2*.05, cy-height,
        x+width-width/2*.05, cy-height,
        x+width, cy);
      ctx.bezierCurveTo(
        x+width-width/2*.05, cy+height,
        x+width/2*.05, cy+height,
        x, cy);
      ctx.closePath();  
      ctx.stroke();
      return({x:x+width,y:cy});
    }

    function drawConnector(startX,startY,endX,endY,hasStartArrow,hasEndArrow){
        ctx.beginPath();
        ctx.moveTo(startX,startY);
        ctx.lineTo(endX,endY);
        ctx.stroke();
        if(hasStartArrow){
            var startRadians=Math.atan((endY-startY)/(endX-startX));
            startRadians+=((endX>startX)?-90:90)*Math.PI/180;
            drawArrow(startX,startY,startRadians);
        }
        if(hasEndArrow){
                var endRadians=Math.atan((endY-startY)/(endX-startX));
                endRadians+=((endX>startX)?90:-90)*Math.PI/180;
                drawArrow(endX,endY,endRadians);
        }
        return({x:endX,y:endY});
    }

    function drawArrow(x,y,radians){
        ctx.save();
        ctx.beginPath();
        ctx.translate(x,y);
        ctx.rotate(radians);
        ctx.moveTo(0,0);
        ctx.lineTo(6,20);
        ctx.lineTo(-6,20);
        ctx.closePath();
        ctx.fill();
        ctx.restore();
    }


}); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas" width=400 height=200></canvas>
</body>
</html>

Upvotes: 1

aiapatag
aiapatag

Reputation: 3430

If you're talking about aligning -- meaning -- "the ellipse after the arrow", and if by saying "I need to place multiple objects and so I used canvas." you mean that you would like the arrow and the ellipse to be ON the canvas, then you would need to manipulate the canvas using Javascript and its API.

You can try to start learning it from here.

Upvotes: 1

Related Questions