CODEWITHSUNDEEP
javascripthtml
21 Average
21 Average

Reputation: 27

How to create shapes in HTML5/Html?

Below is my canvas in which I have a red rectangle on it.

<canvas id="myCanvas" width="300" height="400" style="border:1px 
solid #000000;">
</canvas>

<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.fillStyle = "#FF0000";
context.fillRect(0,0,150,75);

</script>

My questions are how do I position the rectangle to the bottom of my canvas? and, how do I create 2 circles?

Upvotes: 1

Views: 126

Answers (2)

Brent Bradburn
Brent Bradburn

Reputation: 54859

Use canvas.height to calculate coordinates for the bottom of the canvas.

Use context.arc to draw a circle.

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.fillStyle = "#FF0000";
context.fillRect(0,canvas.height-75,150,canvas.height);

function fillCircle( x, y, r ) {
    context.beginPath()
    context.arc(x,y,r, 0,2*Math.PI)
    context.fill(); // alternatively 'context.stroke()'
}

context.fillStyle = "blue";
fillCircle(canvas.width/2,canvas.height/2,100)

context.fillStyle = "red";
fillCircle(canvas.width/2,canvas.height/2, 50)
<canvas id="myCanvas" width="300" height="400" style="border:1px 
solid #000000;">
</canvas>

Upvotes: 2

Mario Vernari
Mario Vernari

Reputation: 7304

I reccomend to use a good library like Konva.

Here is an example to draw a circle:

<html>
  <head>
    <script src="https://unpkg.com/[email protected]/konva.min.js"></script>
    <meta charset="utf-8" />
    <title>Konva Circle Demo</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #f0f0f0;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script>
      var width = window.innerWidth;
      var height = window.innerHeight;

      var stage = new Konva.Stage({
        container: 'container',
        width: width,
        height: height
      });

      var layer = new Konva.Layer();

      var circle = new Konva.Circle({
        x: stage.width() / 2,
        y: stage.height() / 2,
        radius: 70,
        fill: 'red',
        stroke: 'black',
        strokeWidth: 4
      });

      // add the shape to the layer
      layer.add(circle);

      // add the layer to the stage
      stage.add(layer);
    </script>
  </body>
</html>

Upvotes: 0

Related Questions