Tag Archives: method

Drawing arcs using the arcTo method

This tutorial explains how to draw arcs using the arcTo method. You will learn how to draw arcs and join arcs to other lines on the canvas.

This is what the arc attached to lines will look like:

Screen Shot 2015-05-08 at 6.56.39 pm

Watch the video below and then scroll down to see the sample code.

Here is the sample code:

<!DOCTYPE html>
<html>
<head>
 <title>The arcTo method</title>
 <style>
 #myCanvas{
 background-color: white;
 border: 1px solid black;
 }
 </style>
 
</head>
<body>
 <script>
 function draw(){
 var ctx = document.getElementById("myCanvas").getContext("2d");
 ctx.moveTo(50,50);
 ctx.lineTo(200,50);
 ctx.arcTo(250,50,250,100,50); // x1, y1, x2, y2, radius
 ctx.lineTo(250,200);
 ctx.stroke();
 }
 window.onload = draw;
 </script>
 
 <canvas id="myCanvas" width="500" height="350">
</body>
</html>

Next tutorial: Drawing quadratic curves

Drawing paths on the canvas

This tutorial explains how to draw paths on the canvas. Paths can be used to build shapes by creating lines, filling the path, and filling the background with a colour, as seen in the example below.

Screen Shot 2017-04-14 at 5.06.13 pm

Watch the video below and then scroll down to see the sample code.

Here is the sample code:

<!DOCTYPE html>
<html>
<head>
 <title>Drawing paths</title>
 <style>
 #myCanvas{
 background-color: white;
 border: 1px solid black;
 }
 </style>
 
</head>
<body>
 <script>
 function draw(){
 var ctx = document.getElementById("myCanvas").getContext("2d");
 ctx.beginPath(); // this will reset the current default path
 ctx.moveTo(50,50); // x, y coordinates of start of line
 ctx.lineTo(250,50); // creates new line to these x, y coordinates
 ctx.lineTo(250,150); // creates another line to these x, y coordinates
 ctx.lineTo(50,150);
 ctx.fill();
 ctx.closePath(); // this will close the path to complete the rectangle (adds the last line on the left side of rectangle)
 ctx.stroke(); // strokes the current path
 alert(ctx.isPointInPath(75,75)); // returns a true/false value indicating whether the specified point is within a path
 }
 window.onload = draw;
 </script>
 
 <canvas id="myCanvas" width="500" height="350">
</body>
</html>

Next tutorial: Clipping shapes on the canvas

Submitting forms

This video tutorial explains how to create a form which can accept a username and password, and then submit the form data. The video only explains how to use the text and password input types in a form and provides an overview of the two methods of submitting form data: the post and get methods. The next tutorials will explain how to actually validate the data submitted in a form.

A form can be submitted using server-side code eg. PHP. A PHP file would be able to use the form data and send it to a database. In the action section of the form, you specify the file that is going to use the form data and the method (how the form data is used). As there is no PHP file for the example below, the form will not actually work properly, but this is just to show how it should be set out.

We can use the get method or the post method. The GET method is used for purposes such as a search engine, and attaches the information to the URL of the web page. For example, when using the search terms “cricket world cup” on Twitter, you will see the keywords attached to the URL of the search results page like this:

https://twitter.com/search?q=cricket%20world%20cup

The GET method is not secure as information that is submitted is highly visible in the URL. The POST method sends information to the server separately (and does not go in as part of the URL).  The POST method is the more secure method and is used for user logins, membership signup forms, and shopping carts.

Watch the video below and then scroll down the page to see the code.

Note that this tutorial does not actually involve any JavaScript – just an HTML form. JavaScript will be used in the next tutorial when we look at how to validate form data. Here is the code for this tutorial:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8"/>
 <title>JavaScript - Submitting Forms</title>
 <script type="text/javascript">
 
 // A form can be submitted using server-side code eg. PHP.
 // A PHP file would be able to use the form data and send it to a database.
 // In the action section, you specify the file that is going to use the form data
 // and the method is how the form data is used. As there is no PHP file here
 // the form will not actually work properly, but this is how it should be set out.
 // We can use the get method or the post method. The post method sends information to the server
 // separately (and does not go in as part of the URL). POST is the more secure method eg. for a login.
 // The GET method is used for purposes such as a search engine.
 
 </script>
 
</head>
<body>
 
<form action="another_file.php" method="post">
 Username: <input type="text" name="username"/>
 Password: <input type="password" name="password"/>
 <input type="submit" value="Login"/>
</form>
 
</body>
</html>

Next tutorial: Validating form data

Change an image using the Get Element By Id Method

In the previous tutorial, we changed the innerHTML of an element by using the getElementById() method. This allowed us to change the text in a paragraph when we clicked on the paragraph. That is, the text “Click here” was changed to “You clicked here” once it had been clicked.

We will use the same method, but we will change the source of an image instead. This means that we will have one image on our web page and when the user clicks on that image it will be swapped with another image. In the example in the video and sample code below, an orange circle will be replaced with a blue circle when we click on it.

Watch the video below and then scroll down to see the sample code.

The sample code below shows how to use the getElementById() method to swap an image in a HTML web page. If you are not already familiar with how to include an image in a web page, then you will see how to do that using the img src tag. However, it is recommended that you get familiar with HTML before going much further.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8"/>
 <title>JavaScript - Changing an image once</title>
 <script type="text/javascript">
 
 /* In the previous tutorial, we changed the innerHTML of an element by using the getElementById() method
 We will use the same method, but we will change the source of an image instead.
 */ 
 
 function change(){
 var image = document.getElementById('circle');
 image.src = "blue.png";
 }
 
 
 
 </script>
 
</head>
<body>
 
<img src="orange.png" alt="Circle" id="circle" onclick="change();">
 
 
</body>
</html>

Note that the sample code above won’t work properly unless you have images orange.png and blue.png in the same folder/directory as your HTML file. You can try the code out yourself and make your own images instead.

Next tutorial: Swapping images back and forth using JavaScript

Using the Get Element By Id method in JavaScript

The getElementById() method searches through an entire HTML document and looks for an element with whatever ID we specify as the parameter between the quotation marks. The syntax of the method looks like:

 document.getElementById('id goes here')

In the example below, the getElementById method looks for a paragraph that has the element ID of ‘paragraph’. If you’re not familiar with HTML elements (tags) and IDs such as <p>, <h1>, etc. then you will need to brush up on your HTML knowledge now. The paragraph example below contains an onclick event which runs the ‘change’ function to replace the paragraph text using the innerHTML method.

The innerHTML method is used to replace the content of an HTML element such as a paragraph by referring to the element’s ID.

Watch the video below and then scroll down to see the sample code.

This is what the code looks like. There are also some examples of HTML elements/tags being used to format a pagraph with bold/underlined/italic text and a large heading. Notice that when you click on these paragraphs and headings, the text does not change. Only the paragraph with the ID ‘paragraph’ will change its text when it is clicked.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8"/>
 <title>JavaScript - Referencing elements</title>
 <script type="text/javascript">
 
 /* The getElementById() method searches through an entire HTML document and looks for an element with
 whatever ID we specify as the parameter between the quotation marks.
 The syntax is: document.getElementById('id goes here')
 In the example below, it looks for the paragraph element ID.
 If you're not familiar with HTML elements (tags) and IDs such as <p>, <h1>, etc. then you will need
 to brush up on your HTML knowledge now.
 The paragraph example below contains an onclick event which runs the 'change' function to replace the
 paragraph text.
 */ 
 
 function change(){
 var paragraph = document.getElementById('paragraph');
 paragraph.innerHTML = "You clicked here.";
 // innerHTML refers to what is inside the > < tags in the paragraph element which in this example
 // is the words "Click me".
 }
 
 
 </script>
 
</head>
<body>
<p>This is a regular paragraph.</p>
<p>This is another paragraph with <b>bold</b>, <u>underlined</u>, and <i>italic text</i>.</p>
<h1>This is a heading</h1>
 
<p id="paragraph" onclick="change();">Click me</p>
 
</body>
</html>

 

Next tutorial: Changing an image using the getElementById() method