7. Introducing the Canvas | JavaScript Projects for Kids

Sign In Start Free Trial

Book Overview & Buying
Table Of Contents

JavaScript Projects for Kids

By : Omar Faruk Towaha

3.5 (2)

JavaScript Projects for Kids

3.5 (2)

By: Omar Faruk Towaha

Overview of this book

JavaScript is the most widely-used programming language for web development and that's not all! It has evolved over the years and is now being implemented in an array of environments from websites to robotics. Learning JavaScript will help you see the broader picture of web development. This book will take your imagination to new heights by teaching you how to work with JavaScript from scratch. It will introduce you to HTML and CSS to enhance the appearance of your applications. You’ll then use your skills to build on a cool Battleship game! From there, the book will introduce you to jQuery and show you how you can manipulate the DOM. You’ll get to play with some cool stuff using Canvas and will learn how to make use of Canvas to build a game on the lines of Pacman, only a whole lot cooler! Finally, it will show you a few tricks with OOP to make your code clean and will end with a few road maps on areas you can explore further.

Preface

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Free Chapter

1. Exploring JavaScript in the Console

1. Exploring JavaScript in the Console

Installing Google Chrome

Installing Atom

Chrome Developer Tools

Our first program

Why do we use Chrome Developer Tools?

Why do we use Atom as the text editor?

Exercise

Summary

2. Solving Problems Using JavaScript

2. Solving Problems Using JavaScript

Variables

Comments

Arithmetic operators

More operators and operations

Summary

3. Introducing HTML and CSS

3. Introducing HTML and CSS

HTML

CSS

JavaScript on an HTML page

Summary

4. Diving a Bit Deeper

4. Diving a Bit Deeper

JavaScript methods

HTML buttons and form

If statement

Switch-case

Loops

Summary

5. Ahoy! Sailing into Battle

5. Ahoy! Sailing into Battle

The HTML part

The CSS part

The JavaScript part

The final code

Summary

6. Exploring the Benefits of jQuery

6. Exploring the Benefits of jQuery

Installing jQuery

Explaining the code

Going deeper

Summary

7. Introducing the Canvas

7. Introducing the Canvas

Implementing canvas

Adding JavaScript

Drawing a rectangle

Drawing a line

A quick exercise

Drawing a circle

Draw linear gradient

A quick exercise

Let's make a clock!

Summary

8. Building Rat-man!

8. Building Rat-man!

Game user interface

Adding functionalities to the game

Images for Rat-man!

Adding images to our cats

Draw the canvas

Playing the game

Summary

9. Tidying up Your Code Using OOP

9. Tidying up Your Code Using OOP

Inheritance in JavaScript

Encapsulation in JavaScript

Dissecting Hangman

Summary

10. Possibilities

10. Possibilities

JavaScript as your first programming language

All chores can be done by JavaScript

Awesome JavaScript examples

Summary

Index

Index

Drawing a circle

To draw a circle in the canvas, you need to add the following code in your <script></script> tags:

<script type="text/javascript">
  var c = document.getElementById("canvasTest");
  var canvasElement = c.getContext("2d");
  canvasElement.beginPath();
  canvasElement.arc(95,50,40,0,2*Math.PI);
  canvasElement.stroke();
</script>

Here, we used canvasElement.beginPath(); to start drawing the circle, canvasElement.arc(95,50,40,0,2*Math.PI); for the shape of the circle, and canvasElement.stroke(); to set the circle visible.

Note

The canvasElement.arc(95,50,40,0,2*Math.PI); statement is similar to canvasElement.arc(x, y, r, sA, eA, ac);,

where x is the starting coordinate from x axis, y is the starting coordinate from y axis, r is the radius of the circle, sA is the starting angle of the circle, eA is the ending angle of the circle, and ac is the direction of the circle. Here, ac denotes anticlockwise.

The output of our code will be the following image:

CONTINUE READING

83

Tech Concepts

36

Programming languages

73

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

JavaScript Projects for Kids

Search

Your notes and bookmarks