The output is not generated...

Question

0.00/5 (No votes)

See more:

Here is the code>>>>

XML

<!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>

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

        function star(ctx, x, y, r, p, m)
        {
            ctx.save();
            ctx.beginPath();
            ctx.translate(x, y);
            ctx.moveTo(0, 0 - r);
            for (var i = 0; i < p; i++)
            {
                ctx.rotate(Math.PI / p);
                ctx.lineTo(0, 0 - (r * m));
                ctx.rotate(Math.PI / p);
                ctx.lineTo(0, 0 - r);
            }
            ctx.fill();
            ctx.restore();
        }
        star(ctx, 100, 100, 90, 5, 0.5);

</script>
</head>
<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

In output i didn't get the star...

Posted 7-Mar-15 5:30am

Member 10099183

Add a Solution

2 solutions

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) · Answer 1 · 2015-03-07T05:49:00

Solution 1

That is because star function is not invoked. You should run that in document ready event.

Demo - [Demo] Display Star on Canvas[^]

Posted 7-Mar-15 5:49am

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)

Comments

Sergey Alexandrovich Kryukov 7-Mar-15 11:51am

This is even simpler than that. Please see Solution 2.
—SA

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 7-Mar-15 11:57am

Haha. Yes I know that technique as well. As OP has referenced jQuery, so I thought to tell him about the document ready event. ;) :P

Sergey Alexandrovich Kryukov 7-Mar-15 13:08pm

Right. 5ed, by the way.
—SA

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 7-Mar-15 13:15pm

Thanks man. :)

Sergey Alexandrovich Kryukov · Answer 2 · 2015-03-07T05:51:00

Solution 2

Move your script element to body, make it a child of the body element. You will observe the star. The problem is solved.

Now read about using script element and think about it.

—SA

Posted 7-Mar-15 5:51am

Sergey Alexandrovich Kryukov

Comments

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 7-Mar-15 11:58am

+5 bro. :)

Sergey Alexandrovich Kryukov 7-Mar-15 13:09pm

Thank you, Tadit.
—SA

The output is not generated...

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

The output is not generated...

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

Existing Members

...or Join us