Enter your Sign-on user name and password.

Forgot password?
  • Follow us on:
Loading video...
Text Comments (4)

0 answers

Post by Alisher Ulugbekov on January 23, 2011

Very instructive. Thanks Brenton.

0 answers

Post by Richard C. Witt, Jr. on December 13, 2011

Brenton,
I've been able to replicate all the code example except this one. Did you have a CSS style sheet that was being referenced too? The only thing that appeared in my Browser was this:
Canvas Element

This isn't an image, it's a canvas

Nothing other than that appeared. I checked my code to make sure it was what you showed and I tried it in Firefox, Opera. Please advise.

Richard C. Witt
crgmohi@aol.com

0 answers

Post by Eric Rapinchuk on May 10, 2012

This code works guys... ;)



<!DOCTYPE html>
<html>
<head>
<title>Canvas</title>
<link rel="stylesheet" href="css.css"></link>
</head>
<body onload="draw()"> <!-- I NEED THIS -->

<h1>Canvas Element</h1>
<p>This isn't an image, it's a canvas.</p>

<canvas id="draw" width="200" height="200">
Sorry, your browser doesn't support the canvas element :(
</canvas>
<script type = "application/javascript">

function draw() { <!-- i needed this?!!?!?!? -->
var paint = document.getElementById("draw");
var ctx = paint.getContext("2d");

ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);

ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (20, 20, 55, 50);

ctx.fillStyle = "rgba(0,200,0, 0.5)";
ctx.fillRect (30, 30, 55, 50);

ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (40, 40, 55, 50);

ctx.fillStyle = "rgba(200,0,200, 0.5)";
ctx.fillRect (50, 50, 55, 50);

ctx.fillStyle = "rgba(0, 200, 200, 0.5)";
ctx.fillRect (60, 60, 55, 50);
}

<!-- i took the if/else statement out :(-->

</script>
</body>
</html>

0 answers

Post by Eric Rapinchuk on May 10, 2012

add this at the top for the pic...


var img = new Image();
img.src = ("nightpan.jpg");
ctx.drawImage(img,0,0);

The Canvas Element

Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.

Computer Science: HTML

Related Services