Let's Make an Html 5 Text Canvas App
So last time we made a cool tileboard,this time we will make a Html 5 canvas text App.Sounds cool here's what we are going to have at the end of this post..
The Idea.
So i was making this video and i made every slide in blender3d(Iknow that's a bad idea) and it was a pain in the........ so i Was wondering if there is easy way to do it...and i am still wondering.
My Story which not at all useful for you ........
My Story which not at all useful for you ........
So I ended up with this idea.....this is first part as this project is little big....
1) An app which let us create slides and export them...
2) Slides may include text and images.
3) Text and images can have some basic effects like shadows....
If you DON'T KNOW JAVASCRIPT you can follow my learning javascript series which is short and sweet introduction to the world of javascript.......,
Learning JavaScript V
Learning Javascript Part IV
Learning Javascript Part III
Learning Javascript Part II
or if you dont have much idea about html 5 canvas you can jump start here...,
INTRODUCTION TO HTML5 CANVAS
If you DON'T KNOW JAVASCRIPT you can follow my learning javascript series which is short and sweet introduction to the world of javascript.......,
Learning JavaScript V
Learning Javascript Part IV
Learning Javascript Part III
Learning Javascript Part II
or if you dont have much idea about html 5 canvas you can jump start here...,
INTRODUCTION TO HTML5 CANVAS
Ok so are you excited......lets get started.....
The Implementation
We are going to start with the Basic HTML 5 file.
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body onload="Draw()">
<div>
<canvas width="600" height="400" id="Can">Canvas not supported</canvas>
</div>
<script>
</script>
</body>
<html>
Lets create a something for input, we are going to do this with textarea and a button to draw text.
Also something which we can use to change its font
and Something for controlling its position
Also something which we can use to change its font
and Something for controlling its position
Now lets a function to draw Text
The draw() function is like our main function and is responsible for drawing everything on the canvas.
we have also called a function drawBG() here.. don't worry about it much we are going to talk about it later...........
The draw() function is like our main function and is responsible for drawing everything on the canvas.
we have also called a function drawBG() here.. don't worry about it much we are going to talk about it later...........
The variables used in this function are..........
lets create the Function drawBG() to draw the backgorund of our canvas
The End result is........
Full Source Code
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body onload="Draw()">
<div>
<canvas width="600" height="400" id="Can">Canvas not supported</canvas>
</div>
<div>
<table border="10px">
<tr>
<td>
<h4>Text</h4>
<textarea id="MainText"></textarea>
<button onclick="Draw()">Draw Text</button>
</td>
<td>
<h4>Font</h4>
<input type="text" value="50px Arial" id="font">
<button onclick="Draw()">Draw Text</button>
</td>
</tr>
<tr>
<td>
<span id="Rangex"></span>
<br>
<span>Position X :</span><input type="range" id="rangex" max = "600" oninput="Draw(this.value)">
</td>
<td>
<span id="Rangey"></span>
<br>
<span>Position Y :</span><input type="range" id="rangey" max = "400" oninput="Draw(this.value)">
</td>
</tr>
<tr>
<td>
<h4>Text Color</h4>
<input type="color" value="#ffffff" id="ColorChooserText">
<button onclick="Draw()">Change Color</button>
</td>
<td>
<h4>Background Color</h4>
<input type="color" value="#ff0000" id="ColorChooserBG">
<button onclick="drawBG()">Draw Background</button>
<Br>
</td>
</tr>
</table>
</div>
<script>
var Srangex = document.getElementById("Rangex");
var Srangey = document.getElementById("Rangey");
var canvas = document.getElementById("Can");
var c = canvas.getContext("2d");
function Draw()
{
//For Range Input
var rangex = document.getElementById("rangex").value;
var rangey = document.getElementById("rangey").value;
var text = document.getElementById("MainText").value;
c.clearRect(0,0,canvas.width,canvas.height);
//To Draw Background
drawBG();
//For Text
c.fillStyle = document.getElementById("ColorChooserText").value;
c.font = document.getElementById("font").value;
c.fillText(text,rangex,rangey);
//To print the values
Srangex.innerHTML = "Position: " + rangex;
Srangey.innerHTML = "Position: " + rangey;
}
function drawBG()
{
c.fillStyle = document.getElementById("ColorChooserBG").value;
c.fillRect(0,0,Can.width,Can.height);
}
</script>
</body>
</html>
lets create the Function drawBG() to draw the backgorund of our canvas
The End result is........
Full Source Code
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body onload="Draw()">
<div>
<canvas width="600" height="400" id="Can">Canvas not supported</canvas>
</div>
<div>
<table border="10px">
<tr>
<td>
<h4>Text</h4>
<textarea id="MainText"></textarea>
<button onclick="Draw()">Draw Text</button>
</td>
<td>
<h4>Font</h4>
<input type="text" value="50px Arial" id="font">
<button onclick="Draw()">Draw Text</button>
</td>
</tr>
<tr>
<td>
<span id="Rangex"></span>
<br>
<span>Position X :</span><input type="range" id="rangex" max = "600" oninput="Draw(this.value)">
</td>
<td>
<span id="Rangey"></span>
<br>
<span>Position Y :</span><input type="range" id="rangey" max = "400" oninput="Draw(this.value)">
</td>
</tr>
<tr>
<td>
<h4>Text Color</h4>
<input type="color" value="#ffffff" id="ColorChooserText">
<button onclick="Draw()">Change Color</button>
</td>
<td>
<h4>Background Color</h4>
<input type="color" value="#ff0000" id="ColorChooserBG">
<button onclick="drawBG()">Draw Background</button>
<Br>
</td>
</tr>
</table>
</div>
<script>
var Srangex = document.getElementById("Rangex");
var Srangey = document.getElementById("Rangey");
var canvas = document.getElementById("Can");
var c = canvas.getContext("2d");
function Draw()
{
//For Range Input
var rangex = document.getElementById("rangex").value;
var rangey = document.getElementById("rangey").value;
var text = document.getElementById("MainText").value;
c.clearRect(0,0,canvas.width,canvas.height);
//To Draw Background
drawBG();
//For Text
c.fillStyle = document.getElementById("ColorChooserText").value;
c.font = document.getElementById("font").value;
c.fillText(text,rangex,rangey);
//To print the values
Srangex.innerHTML = "Position: " + rangex;
Srangey.innerHTML = "Position: " + rangey;
}
function drawBG()
{
c.fillStyle = document.getElementById("ColorChooserBG").value;
c.fillRect(0,0,Can.width,Can.height);
}
</script>
</body>
</html>
Thanks for your precious time.Please write your thoughts in the comments sections.......
Well explained ..!! helped me a lot to understand canvas app.
ReplyDeleteThankyou Very much
Delete