Separate Javascript code from HTML Canvas

Question

I am trying to learn HTML5 Canvas, which drawn from javascript codes.

It seems that I could not separate Javascript code from the original html. had been looking some solutions:

These has not been a solution for me, as after I implement both solutions what appears to me is blank canvas.

Here is my code.

<!DOCTYPE html>
<html>
<head>
    <title>Christoper Hans' Paint HTML5 Project</title>
    <link rel="stylesheet" type="text/css" href="paint.css">
    <script type="text/javascript"><!--
        window.addEventListener('load', function () {
            var ctx = document.getElementById("paint").getContext("2d");
            ctx.canvas.width  = window.innerWidth;
            ctx.canvas.height = window.innerHeight;

            function drawRect(ctx, x1, y1, x2, y2, fill) {

            ctx.fillStyle=fill;
            ctx.fillRect(x1, y1, x2, y2);
            }

            drawRect(ctx, 100, 100, 200, 250, "FF0000");
        }, false);
// --></script>

</head>
<body>
    <canvas id="paint" width="500" height="500" style="border:1px solid #c3c3c3;">
    Your browser does not support the HTML5 canvas tag.
    </canvas>
</body>

I don't know why but only this kind of code which I got from a post from this website works and I could not separate the javascript to external file.

TL;DR : Wanted to separate javascript from html to work with canvas.

Any help guys?

Would you mind posting any error codes you're getting in your browser console? — Joe
– Joe, Commented Apr 24, 2013 at 14:04
putting block HTML comments around <script> tags hasn't been required since Netscape 3... — Alnitak
– Alnitak, Commented Apr 24, 2013 at 14:05
Joe does not seem to get any error on the browser console. @Alnitak I could not work any other solutions. Please give me alternative than this ancient code. :) — Christoper Hans
– Christoper Hans, Commented Apr 24, 2013 at 14:31

Niet the Dark Absol · Accepted Answer · 2013-04-24 14:05:22Z

0

I would have to guess that you're also copying the  to your external file. If so, don't do that. You shouldn't even use those anymore, unless you're catering to browsers from last milennium.

answered Apr 24, 2013 at 14:05

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Christoper Hans Over a year ago

Tried that just now. Did not seem to work too. Could you please give me an alternative to this solution? The only reason I used this code is because it is the only one that works on my computer.

Christoper Hans Over a year ago

I did not see anything.. Tried opening inspect element on chrome. Or am I opening wrong things?

Niet the Dark Absol Over a year ago

When you open the inspector, do you see a little red X with a number at the bottom-right corner of the inspector window?

Christoper Hans Over a year ago

Could not find that. However, it seems that the javascript does not load at all when I see Network tab of the inspector. Is there something wrong with my javascript linking ? The code was <script src="paint.js" type="text/javasript"></script> Had also make sure the javascript is named paint.js too.

C3roe Over a year ago

type="text/javasript" – really, or just typo when posting here?

|

Christoper Hans · Accepted Answer · 2013-05-02 03:30:08Z

0

Sorry guys. It is my typo that made any external javascript to not loading. @CBroe pointed it out and it all seems to be working now.

answered May 2, 2013 at 3:30

Christoper Hans

6354 silver badges20 bronze badges

Collectives™ on Stack Overflow

Separate Javascript code from HTML Canvas

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related