Friday , 17 November 2017
Home / Tag Archives: guide (page 3)

Tag Archives: guide

Shadows – Advanced JavaScript Tutorial

Shadows

Shadows are a great way to make your 2D drawings pop out. They’re very easy to set up and you’re given a couple properties to get you started. Clear your script and add this bit of code. [crayon-5a0f4cc3ee292790092620/] In the above example we use the 4 main shadow properties and draw a green rectangle onto the canvas. Let’s focus on …

Read More »

Drawing Images – Advanced JavaScript Tutorial

Drawing Images

If you would like to add your own images into the canvas, then you only have to write a couple lines of code to do so. There are a couple of ways of drawing images onto the canvas, but we’ll be using 1 way which is the image object. Please feel free to download the images I use in this …

Read More »

Transformations – Advanced JavaScript Tutorial

Transformations

Transformations allow you to add cool effects to your drawings. This tutorial will cover that and we’ll fix the problem with fuzzy drawings. Fixing Fuzzy Drawings Previously, we set the width and height of the canvas using CSS. This is the wrong way to do things as it can actually stretch our drawings and make it appear fuzzy and blurry. …

Read More »

Text API – Advanced JavaScript Tutorial

Text API

In this tutorial, we’ll take a look at how to add text to our canvas. It’s actually quite simple. You’re given many options to set up how the text appears. Let’s update our script to this. [crayon-5a0f4cc3eff83020362291/] There are 2 methods to add text to the canvas. They are the fillText() and strokeText() methods. Both of these methods have the …

Read More »

Path API – Advanced JavaScript Tutorial

Path API

The path API allows you draw custom shapes with paths.  You can create some really complex shapes and drawings with this API as it comes with powerful methods. Lines Clear your script and add this bit of code. [crayon-5a0f4cc3f04e0626858918/] So, we first set up the stroke color and set it’s with to 2 pixels. Now, we can start drawing some …

Read More »

Canvas – Advanced JavaScript Tutorial

Canvas

Since the introduction of HTML5, the <canvas> tag has grown a great amount of popularity. The <canvas> element allows you to draw graphics onto the document with JavaScript. To get started, let’s update our document to this. [crayon-5a0f4cc3f0c15239029924/] The very first thing we must do is create <canvas> tags. This is where all our graphics will be placed. You MUST …

Read More »

Text Fields – Advanced JavaScript Tutorial

Text Fields

In this tutorial, we’ll focus on text fields in our forms. There a couple of events, properties and methods to make working with forms easier. Selecting Text Let’s update our document to this. [crayon-5a0f4cc3f147c424143931/] Alright, let’s clear out our script and add this bit of code. [crayon-5a0f4cc3f1488904918070/] In our third line, we use a method called select(). This method will …

Read More »

Form Events – Advanced JavaScript Tutorial

Form Events

If you’ve seen my JavaScript tutorial series, then you already know how to work with forms. In this tutorial, we’ll talk a little more about form events  and how to manipulate them with JavaScript. Setting Up The Document Let’s update the body tags to this. [crayon-5a0f4cc3f1a76963892271/] We just have a basic form with some input fields. You should remember that …

Read More »

Event Management – Advanced JavaScript Tutorial

Event Management

This tutorial is based around event management. Just like anything else, creating events takes up memory. Creating multiple events can really slow the performance of your website. Let’s take a look at a couple of ways to still have all the events you want while still keeping your site running in tip top shape! Let’s update the body tags in …

Read More »

Device Events – Advanced JavaScript Tutorial

Device Events

Smartphones and tablets are devices that are frequently used to browse websites. JavaScript now has a couple of events for hand held devices.  For this tutorial, you’ll need to have a mobile phone. I’ll be using the Iphone for this tutorial. Feel free to skip this tutorial if you don’t have a device handy. Orientation The orientationchange event fires when …

Read More »
ULTIMATE WORDPRESS DEVELOPMENT COURSE
Want to learn how to create your own custom WordPress plugins and themes? Check out my course!
Get 93% off my course. You'll also learn how to integrate WooCommerce and BuddyPress into your projects. This is a limited time offer
Yes, I would like to get 93% off your course!
No Thanks!
close-link