Select Lesson
Web Development 1 Project
Photo Booth App - Lesson 1. Photobooth App
Lesson Outline
task 0: Photobooth App
task 1: Give your app a name
task 2: Choose some colors
task 3: Add a button to take photos
task 4: Test the buttons for adding photos
task 5: Add filter buttons
task 6: Add various filters
task 7: Practice fixing spelling mistakes
task 8: Practice fixing incorrect symbols
task 9: Add stickers
task 10: Make the app your own!
Here is the lesson in this app building project. As this is a quick introduction, we do a lot of the coding for you.
We have other courses to further your understanding and skill set in in HTML/CSS and JavaScript.
Concepts
HTML, CSS and JavaScript: The Bones of a Webpage
Apps and webpages are transformed from an endless paragraph of text to an interactive, well designed and structured webpages through using the three languages : '''HTML, CSS and JavaScript'''.
HTML - the markup language (Format the content)
Hypertext-markup language, or HTML, is a language used to add formatting to text.
See the example below of a poem written with and without html on this webpage.
Without HTML:<br>
I went out to the hazel wood,
Because a fire was in my head,
And cut and peeled a hazel wand,
And hooked a berry to a thread;
And when white moths were on the wing,
And moth-like stars were flickering out,
I dropped the berry in a stream
And caught a little silver trout.
<hr>
<h1>With HTML</h1>
<em>
<p>When I had laid it on the floor<br>
I went to blow the fire aflame,<br>
But something rustled on the floor,<br>
And someone called me by my name:<br>
<p>It had become a glimmering girl<br>
With apple blossom in her hair<br>
Who called me by my name and ran<br>
And faded through the brightening air.</em>
<p>Poem by W. B. Yeats from <a href="http://www.world-english.org">world-english.org</a>
CSS - the style sheet language (Make it pretty)
Cascade Style Sheets, or CSS, is a styling language that can be used control the layout and look of a webpage.
It can be taken from a linked page or added to the HTML page you are on at the top of the page inside <style></style> tags.
See the small snippet below for an example.
<style>
h1{
background-color:mediumTurquoise;
}
em{
color:midnightBlue;
}
p{
background-color:powderBlue;
}
</style>
<h1>O Captain! My Captain!</h1>
<p><em>"O Captain! my Captain! our fearful trip is done,<br>
The ship has weather'd every rack, the prize we sought is won,<br>
The port is near, the bells I hear, the people all exulting,<br>
While follow eyes the steady keel, the vessel grim and daring;<br>
But O heart! heart! heart!<br>
O the bleeding drops of red,<br>
Where on the deck my Captain lies,<br>
Fallen cold and dead."<br></em>
<p>Poem by Walt Whitman from <a href="http://www.rainsnow.org/csh_poems_by_walt_whitman.htm">rainsnow.org</a>
JavaScript - the programming language (Make things clickable and interactive)
The interactive tables and buttons you see on a web page (plus a lot of things you probably don't notice) are controlled with JavaScript.
You can learn more about how JavaScript is used in either our Web Development courses or our JavaScript courses.
JavaScript can be written on a separate page or added to the bottom of your HTML webpage with <script></script>.
Here is an example of JavaScript below, click the button to trigger the Javascript.
<h1>JavaScript</h1>
<p><em>"Low hidden in among the forest trees<br>
An artist's tilted easel, ankle-deep<br>
In tousled ferns and mosses, and in these<br>
A fluffy water-spaniel, half asleep<br>
Beside a sketch-book and a fallen hat -<br>
A little wicker flask tossed into that."<br></em>
<p>"Water Color" by James Whitcomb Riley from <a href="http://www.public-domain-poetry.com/james-whitcomb-riley/a-water-color-29321">Public Domain Poetry</a>
<p><button id="greenButton">Click to color background</button>
<script>
function makeBackgroundGreen() {
document.body.style.backgroundColor = 'green';
document.body.style.color = 'powderBlue';
}
greenButton.style.backgroundColor = 'green';
greenButton.style.color = 'powderBlue';
greenButton.onclick = makeBackgroundGreen;
</script>
Concepts
Name your app—task 1
The first task in the our project is naming your app.
You should be able to think of a fun name yourself, but below we have gone into a little more depth about the code you see on the page.
There are some tags that we add to the '''HEAD or top part of our webpage. These are usually for linking to special files (not normal webpages!), or giving the computer information about your webpage. These bits of code do not appear on the app.
Example: Look at the output of this code- what actually shows up for viewers?
<!DOCTYPE HTML>
<html>
<head>
<title>Name in tab</title>
<link href="..." rel="...">
</head>
<body>
<h1> Hello World!</h1>
</body>
</html>
Only the h1 text is in the body section, the rest are in the HEAD of the webpage and are not seen by the webpage user.
html, head and body are always in an html web page. But because they are always there and the browsers know which elements are head elements and which are body elements you don't have to write those tags in your code.Doctype <!doctype>
<!doctype html>, or <!DOCTYPE HTML>, is an element that tells the browser what type of document this is exactly.
Line 1 should always have
<!doctype html> to tell the browser that this document is written in html 5.
Title <title> </title>
Title is a head section element, with a start and end tag.
The title element is important, it defines the title of a document. Title elements are often used on search engine results pages (SERPs) to show a section of your webpage. Title elements are useful for SEO (Helping people to find your website) and social sharing (The info that can show up when you share a link with people). They also show up in your browser tab.
The title element of a web page should give a lot of information of a page's content clearly and in a couple of words. It is often the name of the webpage.
<head>
<title>Introduction to Coding Lesson Notes: Code Avengers</title>
</head>
The heading tags belong in the body section of the code, underneath all of the things that are invisible on the webpage.
Heading tags <h1></h1>
Headings are body section elements, with a start and end tag.
Required attributes: None
Heading tags make text bigger and add space above and below it.
There are 6 heading tags, h1,h2,h3,h4,h5,h6, and they should be used in order, not on how they make your text look (You can change how they look with CSS)
By order we mean order of importance or detail, their hierarchy.
<body>
<h1>h1: main heading</h1>
<h2>h2: subheading</h2>
<h3>h3: sub-subheading</h3>
</body>
Concepts
Background colors—task 2
Most of the layout of the page is controlled by the jQuery and Code Avenger CSS that are in the link elements
<link href="/css/avengerbooth.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
Click to read the jQuery CSS and the CA CSS
More on jQuery below.
Link <link>
A head section element, with a self-closing tag. (No end tag)
Required attributes: rel="What is the relationship between these files?" and href="What is the file path to the file?".
The link tag links a CSS style sheet to our web page, it is used for other files as well but CSS is the most common file you link to. We will learn more about how to add CSS in our later lessons.
<head>
<link rel="stylesheet" type="text/css" href="profile1.css">
</head>
Style <style></style>
This head section element that contains CSS style rules on an HTML page.
CSS is a different kind of markup language from HTML but we can still add it to the HTML page as long as we write the CSS inside the <style></style> tags.
You target the HTML by adding selectors (in red) to target parts of your webpage. The h1 selector will target all the <h1></h1> elements on the page, and anything that is inside them.
<head>
<style>
body{
background-color: steelBlue;
}
h1{
color: aliceBlue;
}
</style>
</head>
<body>
<h1>CSS color</h1>
</body>
In the second task you are simply changing the color of your title bar, background-color: white;, and the text, color: black;.
If you want to learn more about CSS you should complete our HTML and CSS level 1 course
Class—<h1 class="name"></h1>, and id—<h1 id="name"></h1>
Because element selectors style all of that element on the page, h1{} will style ALL <h1> elements, we sometimes want to be more specific and style only some elements...
You could want to style the first and last heading on a page differently from the other headings. You can do this with
ids
and classes.
Our code will contain a lot of classes and ids, don't worry you won't have to write the CSS for them, they are already written in our CA CSS file .
Both of these attributes will target specific elements. Ids are used only once and classes can be used multiple times. You select ids in CSS with #name and classes with .name.
<style>
#id{
color: red;
}
.class{
color: blue;
}
h1{
color:green;
}
</style>
<h1>Normal</h1>
<h1 class="class">Class</h1>
<h1 id="id">Id (only use once)</h1>
<h1 class="class">Class</h1>
<h1>Normal</h1>
Concepts
Camera Button—task 3
The task asks you to add <span onclick="cameraButton()" class="button-center"> on to line 33.
<span onclick="cameraButton()" class="button-center">
It connects the center button (made by the
<i class="icon-ca-camera"></i>
</span>span tag), to the JavaScript function that accesses your webcam and displays an image, "cameraButton()" . It is triggered by clicking with the mouse, onclick="".
The rest of the code:
Div and span tags <div></div>, <span></span>
div and span are body section elements, with a start and end tag.
Required attributes: None, but
classes or ids are often added.
Most things in HTML5 apply meaning, for example a <p></p> should be used to break up ideas. A div is like an empty box. It is most commonly used as a blank block for coders to apply CSS (and JavaScript) to bits of HTML. span is the same but it could be thought of as a blank line instead of a blank box.
Notice that the divs below do not have br to put them in a new line but they start a new line anyway- like p makes a newline. span doesn't make a new-line appear.
<style>
div{
background-color: lightSteelBlue;
}
span{
background-color: navajoWhite;
}
</style>
<p><em>"I met a traveller from an antique <span>land</span><br>
Who said: Two vast and trunkless legs of stone<br>
Stand in the desert. Near them on the <span>sand</span>,<div>Half sunk, a shatter'd visage lies, whose frown<br>
And wrinkled lip and sneer of cold command</div> <div>Tell that its sculptor well those passions read<br>
Which yet survive, stamp'd on these lifeless things,<br></div>
The hand that mock'd them and the heart that fed.<br>
And on the pedestal these words appear:<br>
"My name is Ozymandias, king of kings: <br>
Look on my works, ye Mighty, and despair!" <br>
Nothing beside remains: round the decay <br>
Of that colossal wreck, boundless and bare, <br>
The lone and level <span>sands</span> stretch far away." <br></em>
<p>Ozymandias by Percy Shelley
Build the visual app
All the code inside the div classed as "image" is the code for the photo window and camera buttons.
<div class="image">
<div class="image_camera">
<div id="camera"></div>
<div class="overlay-left"></div>
<div class="overlay-right"></div>
</div>...
The first part builds up all the layers of the visual frame of the app (the colored rectangles and buttons you see), the classes link to JavaScript to draw the shape and to our linked CSS for style. (Look for the class names in the link.)
<div class="canvas-wrapper">
<canvas id="canvas" class="image_canvas"></canvas>
</div>
The actual shapes are drawn with JavaScript need a place to be generated and we do this with the canvas tag and JavaScript. (See an explanation on "Drawing Objects" below)
Fun with symbols
This code here adds the buttons and connects the camera function to the screen.
<div class="image_buttons">
<span class="button-left">+</span>
<span onclick="cameraButton()" class="button-center">
<i class="icon-ca-camera"></i>
</span>
<span class="button-right">-</span>
</div>
</div>
You can actually also customise what goes into the circles in your code.
Do you see where the + and - are?
You can replace them with other characters by writing in their entity code, these are symbols that may not be on your keyboard but HTML recognises them.
In our lessons plans we often use , .
Click here to view a great chart of entity codes from W3C
For example
<span class="button-left">@</span>
...
<span class="button-right">♦</span>
Concepts
Adding a URL—task 4
The code in the PhotoBooth app is looking quite complicated now.
This is the part that makes the left button add an image.
<div class="popup">
<h3 class="popup_header">Insert an image URL to upload it to the app.</h3>
<input class="popup_input" name="image" placeholder="Image URL">
<button class="popup_button">Add Image</button>
</div>
A URL is the full address of a file on the Internet.
Whats in a URL?
A URL (universal resource locator) is an address that identifies the location of a web page, image or other file on the Internet.
E.g. http://www.google.com is the URL for the Google search engine.
We can break a URL into 3 parts:
protocol://server/path
https://www.codeavengers.com/html-css/1#4.4
- How - http, Tell our ISP how we want our information brought to us.
- Where - codeavengers.com, where is the server?..ask a DNS to match up the computer address, IP with the human readable address domain name
- What - /codecamp what file are you getting and what folders are they inside?
Concepts
Filters—tasks 5 and 6
filters canvas
<div class="bar">
<span onclick="addFilter(1)" class="filter">
<canvas id="first-filter" class="canvas" data-filter="1"></canvas>
</span>
<span onclick="addFilter(2)" class="filter">
<canvas id="second-filter" class="canvas" data-filter="2"></canvas>
</span>
<span onclick="addFilter(3)" class="filter">
<canvas id="third-filter" class="canvas" data-filter="3"></canvas>
</span>
<span onclick="addFilter(4)" class="filter">
<canvas id="fourth-filter" class="canvas" data-filter="4"></canvas>
</span>
</div>
The CSS for this is on the bottom of our external CSS page
The bar div puts all the
filters
on a bar beneath the photo frame.
The filter class simply sets the height and width and display of each filter so they line up in the app.
The canvas class and tag add spaces for the filter and image.
Again the webpage is linked to the JavaScript with the onclick attribute and the addFilter() function.
In CSS square brackets lets you select an attribute to add CSS too.
The data-filter attribute links to the CSS that adds the visual changes to the image in the preview.
The filter property is a fairly new one and won't work on most browsers yet.
That is why we have -webkit-filter with the same values, it will work on Chrome, Firefox, Opera and Safari...It will NOT work on Internet Explorer.
Customizable fun
You can add a few different values to filter. We have added 8 options that you could change to by changing the number,data-filter="1".
- grayscale
- sepia
- saturate
- invert
- hue-rotate
- brightness
- contrast
- blur
Concepts
Bugs—tasks 7 and 8
Bugs, mistakes in your code, are very common and need to be fixed to allow the program to run as intended.
It is important to check your code and look for mistakes.
Common mistakes are
- Using the wrong quote marks.
You have to open and close a string with the same type of marks"text" or 'text'
- Check that every open bracket has a closing bracket,
(),{},<>.
You also need to make sure you are using the right kind of bracket in the right place.
- Using the right tag. Dont confuse attributes like
srcorhref.
You must use end tags for most elements- learn which are self closing and which have a start and an end tag.<img></img>would be wrong.
- Spell keywords and names correctly.
heading1origmwill not work. Remember to use American English spelling in the CSS,color:gray;.
- Spell keywords and names correctly.
- Using the right tag. Dont confuse attributes like
- Check that every open bracket has a closing bracket,
Concepts
Customizable fun—Filters, Buttons, Stickers
Here are some things you can customise in your app- Filters, Buttons, Stickers. (Note: Copied from above so you can see it all in one place)
Buttons
This code here adds the buttons and connects the camera function to the screen.
<div class="image_buttons">
<span class="button-left">+</span>
<span onclick="cameraButton()" class="button-center">
<i class="icon-ca-camera"></i>
</span>
<span class="button-right">-</span>
</div>
</div>
You can actually also customise what goes into the circles in your code.
Do you see where the + and - are?
You can replace them with other characters by writing in their entity code, these are symbols that may not be on your keyboard but HTML recognises them.
In our lessons plans we often use , .
Click here to view a great chart of entity codes from W3C
For example
<span class="button-left">@</span>
...
<span class="button-right">♦</span>
Filters
You can add a few different values to filter. We have added 8 options that you could change to by changing the number,data-filter="1".
- grayscale
- sepia
- saturate
- invert
- hue-rotate
- brightness
- contrast
- blur
Stickers
You can add your own images as stickers.
Smaller images without a lot of detail are best.
You can find a URL online or you can make your own and upload it to a website.
make8bitart.com is a great site created by jennmoneydollars. It is a place where you can make quick online art and save it online immediately on Imgur.
Getting a URL
- Go online and search for a photo or image.
- Right-click on that photo or image.
- Click Copy Image Address.
- Inside the
src=""attribute delete the red file path. - Right-click inside the quote marks.
- Click Paste
Video for adding an image from make8bitart
Extension: Concepts
jQuery
jQuery is a library of JavaScript code.
Our developers can do a lot of cool things but it would be a waste of time for them to make code to access your webcam when someone has already written that code.
You will find a lot of your time is saved by using libraries and
modules
to help improve your own programs.
Now, you still need to know how to program to integrate and run the code but knowing how to find and use resources is a very important part of being a developer or programmer.
Here is the webcam file that helps make the PhotoBooth work js/webcam/jquery.webcam.js
Concepts
Indenting HTML
Formatting your HTML code makes it much easier to read.
If an element is inside another element it should be moved to the right a bit on a new line (this is called indenting).
This leaves white space on the left hand margin so that it is really easy to see what elements are inside others and it makes your code tidy.
How much do we indent by?
The internet rages with conversations about whether to use 2 spaces, 4 spaces, or 8 spaces when indenting. We are a 2 space company because we follow the Google Style Guide →.
So what should you use? Well, we recommend 2 spaces. However, it is ok to follow personal preference- if you wish to have 4 or 8 spaces then add those. Just make sure you use indentation to add space to the left margin.
You can use empty lines (hitting ENTER) for formatting as well, this has no effect on your webpage but it makes the HTML code easier to read.
2 space indentation:
<!DOCTYPE html>
<html>
--<head>
----<title>HTML TAGS</title>
--</head>
--<body>
----<h1>Hello Everyone</h1>
--</body>
</html>
4 space indentation:
<!DOCTYPE html>
<html>
----<head>
--------<title>HTML TAGS</title>
----</head>
----<body>
--------<h1>Hello Everyone</h1>
----</body>
</html>
You might also notice how the automatic color coding in your code editor helps a lot too. This is called "syntax highlighting".
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
<style>
html{
background-color:lightGrey;}
#drawing{
background-color:aliceBlue;
border: slateGrey dashed 1px;
}
</style>
<h1>Drawing Canvas</h1>
<canvas id="drawing" width="250" height="200">
HTML5 Canvas isn't working if you see this text.
</canvas>
<script>
var drawing = document.getElementById('drawing');
var shape1 = drawing.getContext('2d');
/*Write your drawing code here*/
shape1.fillStyle = 'lightBlue';
shape1.strokeStyle= 'navy';
shape1.fillRect(25, 25, 50, 50);
shape1.strokeRect(25, 25, 50, 50);
</script>
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.
<style>
#drawing{
border: lightGrey dashed 1px;
}
</style>
<p>The grey border shows the canvas, the red rectangle is created with JavaScript.
<canvas id="drawing" width="150" height="100">
HTML5 Canvas isn't working if you see this text.
</canvas>
<p>Did you know this is a live example? Click on the HTML code box and try your own code.
<script>
var drawing = document.getElementById('drawing');
var codeForDrawing = drawing.getContext('2d');
codeForDrawing.fillStyle = 'lightBlue';
codeForDrawing.fillRect(25, 25, 50, 50);
</script>
Adding JavaScript
The 2d 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
<style>
html{
background-color:lightGrey;}
#drawing{
background-color:aliceBlue;
border: slateGrey dashed 1px;
}
</style>
<canvas id="drawing" width="200" height="200">
HTML5 Canvas isn't working if you see this text.
</canvas>
<script>
var drawing = document.getElementById('drawing');
var rectangle = drawing.getContext('2d');
rectangle.rect(25,25,50,50);
rectangle.stroke();
</script>
Lines
Begin a path, move to position 0,0. Create a line to position 300,150:
<style>
html{
background-color:lightGrey;}
#drawing{
background-color:aliceBlue;
border: slateGrey dashed 1px;
}
</style>
<canvas id="drawing" width="200" height="200">
HTML5 Canvas isn't working if you see this text.
</canvas>
<script>
var drawing = document.getElementById('drawing');
var line = drawing.getContext('2d');
line.beginPath();
line.lineWidth="5";
line.strokeStyle="navy";/*Draw path*/
line.moveTo(0,45);
line.lineTo(150,45);
line.stroke();/* Needs stroke function to show drawing*/
line.beginPath();
line.strokeStyle="lightBlue";
line.moveTo(60, 10);
line.lineTo(140,160);
line.stroke();
</script>
Triangle
<style>
html{
background-color:lightGrey;}
#drawing{
background-color:aliceBlue;
border: slateGrey dashed 1px;
}
</style>
<canvas id="drawing" width="200" height="200">
HTML5 Canvas isn't working if you see this text.
</canvas>
<script>
var drawing = document.getElementById('drawing');
var line = drawing.getContext('2d');
line.beginPath();
line.lineWidth="5";
line.strokeStyle="navy";/*Draw path*/
line.moveTo(10,45);
line.lineTo(150,45);
line.lineTo(150,10);
line.lineTo(10,45);
line.stroke();/* Needs stroke function to show drawing*/
</script>
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.
arc.beginPath();
arc.arc(40,40,20,0,2*Math.PI);
arc.stroke(); /* Draw it*/
</script>Semi circle
arcTohere 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);
arc.beginPath();
arc.arc(40,40,20, 1*Math.PI,2*Math.PI,true);
arc.stroke(); /* Draw it*/
</script><style>
html{
background-color:lightGrey;}
#drawing{
background-color:aliceBlue;
border: slateGrey dashed 1px;
}
</style>
<canvas id="drawing" width="200" height="200">
HTML5 Canvas isn't working if you see this text.
</canvas>
<script>
var drawing = document.getElementById('drawing');
var arc = drawing.getContext('2d');
arc.beginPath();
arc.moveTo(30,30); /*Start (shows centerpoint)*/
arc.arc(30,30,20,0,0.5*Math.PI,true); /*90 degrees, drawn counter clockwise (true)*/
arc.moveTo(60,60); /*Start (shows centerpoint)*/
arc.arc(60,60,20,0,2*Math.PI); /*360 degrees*/
arc.moveTo(90,90); /*Start (shows centerpoint)*/
arc.arc(90,90,20,0,Math.PI); /*180 degrees*/
arc.moveTo(120,120); /*Start (shows centerpoint)*/
arc.arc(120,120,20,0,0.5*Math.PI); /*90 degrees*/
arc.stroke(); /* Draw it*/
</script>
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 shape
stroke
The lines that make up the outline of a letter or shape
There 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';//nameshape1.fillStyle = 'red';
shape1.strokeStyle= 'blue';
<canvas id="drawing" width="150" height="100">
HTML5 Canvas isn't working if you see this text.
</canvas>
<script>
var drawing = document.getElementById('drawing');
var shape1 = drawing.getContext('2d');
shape1.fillStyle = '#5889d2';
shape1.strokeStyle= 'blue';
shape1.fillRect(25, 25, 50, 50);
shape1.strokeRect(25, 25, 50, 50);
</script>