CODEWITHSUNDEEP
canvashtml5-canvas
scapegoat17
scapegoat17

Reputation: 5821

Trying to make a trapezoidish looking shape with canvas

I am working on creating a trapezoid looking shape with Canvas, but I am very new to it. In fact. This is my first time using it. I seem to have hit a snag with with my shape and i am not exactly sure how to fix it. Could anyone help?

I have a fiddle here: http://jsfiddle.net/auwgr/

--- EDIT ---

I realized that I didnt really provide any clarification on what I was trying to accomplish. Here is an image of what i would like the shape to look like:

enter image description here

Kinda like that (sorry for my drawing skills or lack of drawing skills)...

Thanks!

Upvotes: 0

Views: 206

Answers (1)

markE
markE

Reputation: 105015

You can draw your rounded-trapezoid using a canvas path.

enter image description here

This path has 4 parts:

  • top-arc: sweeping from top-left to top-right

  • right-line: from the end of top-arc to the right of bottom-arc

  • bottom-arc: sweeping from bottom-right to bottom left

  • left-line: closes the path between the bottom-left and top left arcs.

Example code and a Demo: http://jsfiddle.net/m1erickson/kqY8D/

<!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; }
    canvas{border:1px solid red;}
</style>
<script>
$(function(){

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

    // the centerpoint of the arc-trapezoid
    var cx=150;
    var cy=150;

    // the inside and outside radii
    var insideRadius=60;
    var outsideRadius=100;

    // the beginning and ending angles 
    var beginningAngle=Math.PI*5/4;
    var endingAngle=Math.PI*7/4;

    // use trigonometry to calculate the starting point
    // of the bottom leftward sweeping arc
    var x=cx+insideRadius*Math.cos(endingAngle);
    var y=cy+insideRadius*Math.sin(endingAngle);

    // set the path style
    ctx.strokeStyle="red";
    ctx.lineWidth=2;

    // begin the path

    ctx.beginPath();

    // top-arc: sweeping from top-left to top-right

    ctx.arc(cx,cy,outsideRadius,beginningAngle,endingAngle);

    // right-line: from the end of top-arc to the right of bottom-arc

    ctx.lineTo(x,y);

    // bottom-arc: sweeping from bottom-right to bottom left
    // (Note: the true on the end causes the arc to sweep right to left

    ctx.arc(cx,cy,insideRadius,endingAngle,beginningAngle,true);

    // left-line: closes the path between the
    // bottom-left and top left arcs.

    ctx.closePath();

    // stroke the path

    ctx.stroke();

}); // end $(function(){});
</script>
</head>
<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

Upvotes: 2

Related Questions