Adding 2D graphics to a webpage
If you want to add your images to a normal web page outside of Code Avengers, it will require a little set up.
Code to add images
We have made a Path module'' that is based off the2D JavaScript graphics module'''.
The Code Avengers' code is easier to use because we do all of the set up for you but it only works on code saved on our website.
If you are ready to make graphics in your own website then read the content below.
You first need to learn about HTML <canvas>
and linking JS, HTML and the 2D context library.
Then you need to learn how the functions work for 2D, we have some notes and links below that can help you.
You can add this to your html page
The tags and JS covered here are <canvas></canvas>
and .getContext('2d')
You can draw images and shapes onto a webpage using code instead of uploading an image.
Canvas tag —<canvas></canvas>
HTML5 element <canvas>
gives you an easy and powerful way to draw graphics using JavaScript. It can be used to draw graphs, shapes, text or even do simple (and not so simple) animations.
To get canvas
to work is a little tricker than the other tags. The <canvas>
element places the drawing window on the page. We added a border in CS so you can see it. But the drawing is written in JavaScript.
Adding JavaScript
The2d
interface is used for drawing circles, rectangles, text and more inside a canvas element. The library called '2d' has all the code context to draw the shapes (written in JavaScript) on the canvas.
So in the code above we have a
canvas
in HTML but the important stuff is happening in the script
element.
Firstly we make a variable that links our canvas to the JavaScript,
var drawing = document.getElementById('drawing');
.
Then we create a variable to link our JavaScript to the already existing code inside the file called
2d
, var codeForDrawing = drawing.getContext('2d');
.
Now with those 3 things linked you can draw a lot of different shapes.
2d
so you only have to ask for the browser to find it and pull the context out of it. Read a good explanation of context on StackOverFlow by Brian Kelly from 2011.Drawing shapes
You can draw many things, the basics are lines, rectangles, circles, triangles, half circles and stars. The drawing code is slightly different to what you have learned here at Code Avengers.
See a range of options at W3schools
Rectangle
Lines
Begin a path, move to position 0,0. Create a line to position 300,150:
Triangle
Circle
Use arc to make a full circle
(name.arc(x,y coordinates of center, radius, start angle(0 is on right side of screen), end angle, clockwise?)
The angles are not degrees but radians. 2PI is a whole circle so 1*Math.PI
will draw half a circle etc.
Semi circle
arcTo
here is more of a rounded corner function
Use arc
instead and brush up on your radians and PI. You can use PI in your equation- you just have to call it from the Math library, Math.PI
.
name.arc(x-of center,y-of center,radius,sAngle,eAngle,counterclockwise (optional));
name.arc(40,40,20, 1*Math.PI,2*Math.PI,true);
The beginPath() method begins a path, or resets the current path.
Color
You can draw a wide range of shapes and change their colors. There are two parts of a shape that you can control the color of the fill and the stroke:
fill
'Color in', the color that fills up the inside area of a letter or shapestroke
The lines that make up the outline of a letter or shapeThere are a couple of ways you can change the color of your graphic.
You can use 'symbolic names' like 'red', 'chartreuse' 'OrangeRed', or, if you know about RGB or Hex colors, these work too.
rect.fillColor = '#5889D2'; //hex
rect.fillColor = 'rgb(88,137,210)';//RGB
rect.fillColor = 'stelBlue';//name
shape1.fillStyle = 'red';
shape1.strokeStyle= 'blue';
- download
- new file
- upload media
- rename
- delete
Run Ctrl+Enter
Check Ctrl+Shift+Enter
Reset Ctrl+Backspace
Redo Ctrl+Y
Cut Ctrl+X
Copy Ctrl+C
Paste Ctrl+V
Find Ctrl+F
Find & replace Ctrl+F+F