CODEWITHSUNDEEP
javascriptcanvas
Nick Allbritton
Nick Allbritton

Reputation: 3

Canvas drawing wont show

I was making a web game just for a little practice, but my drawing will not show in the canvas element of the browser. I do not know why it will not show. By the way, I used variables as the value of the horizontal position so that I could easily change them later.

JavaScript

var canvas = getElementById('myCanvas');
var blt = canvas.getContext('2d');
var bS = 20;
var x = 220;
var y = 340;
var x1 = 227;
var x2 = 229;
var x3 = 240;
var x4 = 251;
var x5 = 253;
var x6 = 260;

function drawShip() {
  blt.beginPath();
  blt.moveTo(x,360);
  blt.lineTo(x,340);
  blt.lineTo(x1,337);
  blt.lineTo(x2,337);
  blt.lineTo(x2,340);
  blt.lineTo(x3,330);
  blt.lineTo(x4,340);
  blt.lineTo(x4,337);
  blt.lineTo(x5,337);
  blt.lineTo(x6,340);
  blt.lineTo(x6,360);
  blt.lineTo(x,360);
  blt.closePath();
};

drawShip();

Upvotes: 0

Views: 69

Answers (3)

CMedina
CMedina

Reputation: 4222

In your code change the line

var canvas = getElementById('myCanvas');

by

var canvas = document.getElementById('myCanvas');

and add blt.stroke(); after blt.closePath();

Upvotes: 1

R. Schifini
R. Schifini

Reputation: 9313

You forgot to stroke the path. Add this after blt.closePath()

blt.stroke();

Upvotes: 1

Ludonope
Ludonope

Reputation: 1093

You need to use the stroke() method to draw the path as a line.

Here you can find every canvas methods and some documentation and examples: http://www.w3schools.com/tags/ref_canvas.asp

Upvotes: 2

Related Questions