Again canvas glitching out

Question

So let me get this straight... I code a triangle, works fine, I code a square, works fine, but the moment I try to put them together it doesn't work?!?!?!

Answer 1

Astro link Your code has multiple errors. You should look through the Canvas API documentation as Bob_Li suggested.

Here's all the errors and how to fix:

HTML:

1. The border sub-properties for styling the canvas element is wrong. The correct order of the values are: <width> <style> <color>
So it should be: border: 2px solid #F5F5DC

2. The second canvas(id="myCanvas") has no height or width set, so it won't show anything, or will show up as unexpected. Set a height and width for it.

JavaScript:

3. You mistakenly used canvas.getContext("2d") instead of canvas2.getContext("2d") in the ctx2 variable.

4. Your positions of points for drawing the triangle seems wrong. For example: the first point(0, 200) would start from the left edge of the canvas, which would be outside or too left sided. The second point(50, 150) would make a line downwards. The third point(50, 250) is lower than the second point, and all these points don't really make a proper triangular shape.

Answer 2

yes, as Afnan Irtesum Chowdhury said, multiple errors.
the triangle is ok, but your #myCanvas have no dimensions and css positioning, that's why it's not showing up...

https://sololearn.com/compiler-playground/WI3pDpSmUh4l/?ref=app

Answer 3

Please show your code so we can help you in fixing it 👍

Answer 4

work through this:

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API

Answer 5

Oh yeah I forgot to show the code

https://sololearn.com/compiler-playground/WXVy0jAztCGG/?ref=app