Skip to main content

Html 5 Canvas Text App Part II

Html 5 Canvas Text App Part II

Last time we made the Canvas text app.This time we will add shadows and download functionality to it. Lets get started.

If you haven't seen the first part of this series , I recommend you to do so here...,


HTML 5 Shadows

In html 5 you can give shadows not only to the text. HTML 5 Shadows provides four properties make awesome effects.

context.shadowColor

For the color of the shadow.Color is given in the format  “#RRGGBB”.

context.shadowOffsetX

A positive or negative number showing x offset of shadow. 

context.shadowOffsetY

A positive or negative number showing x offset of shadow. 

context.shadowBlur

Provides blur filter for diffusion of the shadow. The higher the value, the more diffusion.

An example of it can be 

context.shadowColor = "#00FF00";
context.shadowOffsetX = 4;
context.shadowOffsetY = 4;
context.shadowBlur = 1;

This will produce this result...,






Now when you understand the concepts of shadows lets work on the app.


THE IMPLEMENTATION


Lets make some inputs for shadows.


Now lets add functionality to this code



We will call this function in draw() function just like the drawbg() functionality.

 Now lets create the download section so that we can download the end result of the slide.





  Add Functionality to it....,

   


Here is the End result...,



Here is the full 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">Hello Canvas</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()">
                    </td>
            <td>
            <span id="Rangey"></span>
            <br>
            <span>Position Y :</span><input type="range" id="rangey" max = "400" oninput="Draw()">
                    </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>
                   <tr>
                       <td>
                           <span>Shadow X :</span><input type="number" id="ShadowoffX"  oninput="Draw()">
                           <br>
                           <span>Shadow Y :</span><input type="number" id="ShadowoffY"  oninput="Draw()">
                           <br>
                           <span>Shadow Blur :</span><input type="number" id="ShadowoBlur"  oninput="Draw()">
                           <br>
                           <span>Shadow Color :</span><input type="color" value="#000000" id="ShadowColor"  oninput="Draw()">
                       </td>
                       <td>
                           <p>Click Here to Save Canvas</p>
                           <a id ="DownloadCanvas" download="Canvas.jpg">Download Canvas</a>
                       </td>
                     
                   </tr>
                   </table>
        </div>
        <script>
         
            //To make tutorial of it we are going to copy commands one by one and make a ste
            //by step
         
            var Srangex = document.getElementById("Rangex");
            var Srangey = document.getElementById("Rangey");
         
            var canvas = document.getElementById("Can");
            var c = canvas.getContext("2d");
         
            //EventListener
            DownloadCanvas.addEventListener("click",canvassave,false);
         
            function Draw()
            {
             
            //For Range Input
            var rangex = document.getElementById("rangex").value;
            var rangey = document.getElementById("rangey").value;
         
            //For Text
            var text = document.getElementById("MainText").value;
         
         
            c.clearRect(0,0,canvas.width,canvas.height);
         
         
         
            //To Draw Background
            drawBG();
     
         
            //Draw Shadow
            DrawShadow();
         
         
            //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 canvassave()
          {
            var dataurl = canvas.toDataURL();
              this.href = dataurl;
           
          }
           //drawBG function
           
             function drawBG()
       
          {

            c.fillStyle = document.getElementById("ColorChooserBG").value;
     
            c.fillRect(0,0,Can.width,Can.height);
         
          }
   
       
          //Draw Shadow
       
          function DrawShadow()
          {
              c.shadowOffsetX = document.getElementById("ShadowoffX").value;
              c.shadowOffsetY = document.getElementById("ShadowoffY").value;
              c.shadowColor = document.getElementById("ShadowColor").value;
              c.shadowBlur = document.getElementById("ShadowoBlur").value;
          }
       
     
         
            </script>
         
    </body>
</html>



Thank you very much for your support.

 Please Subscribe to this blog or follow me on google plus in top left corner for more stuff like this.






Labels:

Comments

Post a Comment

Popular posts from this blog

Gdevelop: How to manually export to android or ios using Cordova

In this post we will see how to export your Gdevelop project to android or ios manually using cordova. Gdevelop provides a web service for export to android or ios. But it is a paid service it only provides 2 exports/day. By paying for subscription you support developement of Gdevelop but it you don't want to pay, Gdevelop provides you with an offline option. We will see how we can export Gdevelop project as a Cordova project and build it using a cordova by ourselves locally on our computer. Obviously for FREE!!. Lets get started. Prerequisite  I am assuming you have Android SDK installed on computer.If not then download it and install it first. I am not covering it here as it is a general thing and you can find plenty of tutorials and also that it will make this post unnecessarily longer. Also cordova requires node.js installed on your computer..Installing is as easy as downloading the installer and running. Link :  https://nodejs.org/en/ After installing the no...
26 comments
Read more

Gdevelop 5 : How to Find Distance Between Two Objects

In this Post we will learn how to find distance between two objects in Gdevelop 5. Many times we are required to find distance between two objects Gdevelop provides inbuilt functionality for this purpose just let's get started. Creating A Project We will start by  creating an empty  project.  So click on create a new project and name it distance between two objects.  Let's quickly add a scene and a sprite. Let's add another sprite. I will also add text to display the distance between these two sprites.  Let's add these objects to the scene.Now let's head over to the event sheet and Add an event.The condition will be empty and action will to display the distance. So choose the distance choose->modify text and operator be set to equal and click on then expression button. We first have to convert expression to string choose conversion and then number to text. Click on the expression button and then search square root. Click on expression button again and this t...
19 comments
Read more

Gdevelop Game Debugger and Profiler Tutorial

Gdevelop Game Debugger and Profiler In this post we will learn how to use Debugger. It helps us remove bugs from our game. A bug is basically a error or fault in our game that makes game work in in intended. A debugger helps remove bugs from our game. Debugger    Its a tool that is used to inspect the variables and objects of game at runtime. It gives us information about the objects and variables in the game. By using this information we can track the bugs in our game. It Debugger as it helps us remove the bugs from our game.  Using Debugger we can inspect  global variables, scene variables and variables of instances of  objects in the game. We can then analyse this information to find problems in our logic and game. How to Launch game with the debugger To use the debugger, we need to launch the game preview using the Debugger. To do this just go to the toolbar of a scene editor, click on the “Debug” icon and then choose “Prev...
20 comments
Read more

[Inkscape] : How to import inkscape SVGs in Html file

[Inkscape To Web]: Make beautiful sites with SVGs In this tutorial we will make a SVG drawing in Inkscape and will use it in a webpage. The goal of this tutorial is to know how to make beautiful SVG Drawing for your website. Before starting you should have following things, Familiarity with SVGs/Inkscape and HTML  Inkscape Installed. How to Embbed Step 1: Open Inkscape. Now make a simple Shape. I am making a polygon,                                       [Click on the Image to Enlarge] Step 2: Now save it as a svg. The inkscape saves its files as svgs but it is not compatiable with html. It a lot Inkscape specific(useless) data. To save it as plain Svg. Click on File->Save as. Then from dropdown box in the dialog box. Choose the .PlainSvg.  [Click on the Im...
13 comments
Read more

Blender 3D Graph Builder Addon Tutorial

Graph Builder Addon lets you generate 3D Bar Graphs from simple values. The bars can have simple animation.In this tutorial,I will be making a simple 3D graph in blender with this Addon. You can download the addon on Github and download the data that I am going to use  and end result from here , in case you want to follow along . Though you can use any data you want, just make sure data values are integer and each value is separated by a comma.  Just to give you an idea Graph Builder addon work like this.   Installation Just extract the file. Open Blender and go to user preferences and select “install from the file”. Then locate and choose the graph.py file. Tutorial: There are 4 panels in the addon. We will go to them one by one and see what are their usage. Step1:  Copy Data into the data values and set the factor. Here, you want to enter the values that will be used to draw the graph. Each value represents a bar on the grap...
13 comments
Read more

How to make Make money with Inkscape

How to make Make money with Inkscape Inkscape is a free and open source but professional vector graphics editing program for Windows, Linux and Macintosh. A Free alternative to Adobe Illustrator and is used by a lot of enthusiasts, art students and artist all around the world. Ah.. you knew this already? Right!! Otherwise why would you read this post. So here are the ways to make money with inkscape. Selling Vectors This is an obvious one but not as easy as it seems, you see there is a lot of competition, you will  hundreds of sites if not thousands for selling vectors with tens of thousands of sellers on them also it's not that you can sell anything made with inkscape you need to follow some standards.For example here is an article which might be helpful, http://sellingvector.blogspot.com/p/how-to-start-selling-vectors.html?m=1 Tutorials If you want to know more about how to sell vectors created in inkscape then you should read ...
26 comments
Read more

A Quick Look at Machine learning

A Quick Look at Machine learning Ever heard of ‘Artificial intelligence’, of course you did after all we all watch sci-fi movies. But if you ever tried to know more about AI then you might have heard about Machine learning. Also in past few years it's been a hot topic in computer science. So, what is machine learning??. Let's talk about this…, Computer are everywhere today, even in your pocket (your phone).They help us do a lot of thing but in reality these are just calculators with logic and control circuitry.Therefore we can program them to do different tasks.But there are scenarios where we cannot predict the situation and its nearly impossible to program the computer for that.For instance , CCTV Cameras are installed at many places and surveillance has become very easy as it can be done remotely but we need a human to process the video from the cameras as a computer cannot tell us if everything is ok or not.Now imagine if the computer can automatically dete...
6 comments
Read more