google+javascriptbanktwitter@js_bankfacebook@jsbankrss@jsbank
Guest, register






JavaScript in HTML5 vs ActionScript 3 in Flash in Drawing Match - Who Win? Perhaps I did not to talk more, everyone knew HTML5 and Flash - these two web technologies are developed and improved to attract more attentions from web developers.

Today in this canvas tutorial JavaScript post, I'm pleasure to present you a match of HTML5 and Flash in simple JavaScript drawing round: creating a warning icon by code lines. The arms of both two races: HTML5 using canvas element with support from JavaScript, Flash with Action Script 3.

Although the author did not show which technology won, but personally according to final images, jsB@nk think it's HTML5 because the color of picture made by HTML5 is more real than Flash; however, this is just a very simple HTML5 canvas test and these web technologies are still improved. Please go to the full post page for detailed results.


Free iPage Web Hosting for First Year NOW



If you're still looking for a reliable web host provider with affordable rates, why you don't take a little of time to try iPage, only with $1.89/month, included $500+ Free Extra Credits for the payment of 24 months ($45)?

Over 1,000,000+ existisng customers can not be wrong, definitely you're not, too! More important, when you register the web hosting at iPage through our link, we're going to be happy for resending a full refund to you. That's awesome! You should try iPage web hosting for FREE now! And contact us for anything you need to know about iPage.
Try iPage for FREE First Year NOW

Create the Inner Stroke Path


Next we create a smaller triangle within our first triangle. Later we will stroke it and utilize standard properties to curve the border of our stroke for us.

Triangular Inner Path to Stroke

// Create the inner border path
context.beginPath();
context.moveTo(canvasWidth/2, this.padding + this.lineWidth);
context.lineTo((canvasWidth + this.width)/2 - this.lineWidth, this.padding + this.height - this.lineWidth/2);
context.lineTo((canvasWidth - this.width)/2 + this.lineWidth, this.padding + this.height - this.lineWidth/2);
context.lineTo(canvasWidth/2, this.padding + this.lineWidth);
context.closePath();
// Create the inner border path
var strokePath:GraphicsPath = new GraphicsPath(new Vector.(), new Vector.());
strokePath.moveTo(canvasWidth/2, padding + innerBorder);
strokePath.lineTo((canvasWidth + iconWidth)/2 - innerBorder, padding + iconHeight - innerBorder/2);
strokePath.lineTo((canvasWidth - iconWidth)/2 + innerBorder, padding + iconHeight - innerBorder/2);
strokePath.lineTo(canvasWidth/2, padding + innerBorder);

Bang!


With any icon, we have a message. The warning standard is an exclamation point (aka a "bang" character) which we add in the center of our icon. We could use a text representation but we will not do that for a various reasons (the user might not have that font, the size cost for embedding an entire typeface just for one character is not worth it, etc.)

exclamation point path

// Create the text (aka bang) path
context.beginPath();	
// Top
context.moveTo(canvasWidth/2 - 8, this.padding + 45);			
context.quadraticCurveTo(canvasWidth/2, this.padding + 35,  canvasWidth/2 + 8, this.padding + 45);
// Bottom
context.lineTo(canvasWidth/2 + 3, this.padding + 66);
context.quadraticCurveTo(canvasWidth/2, this.padding + 78, canvasWidth/2 - 3, this.padding + 66);
// Close path
context.lineTo(canvasWidth/2 - 8, this.padding + 44);
// Create the text (aka bang) path
var bangPath:GraphicsPath = new GraphicsPath(new Vector.(), new Vector.());
// Top
bangPath.moveTo(canvasWidth/2 - 8, padding + 45);			
bangPath.curveTo(canvasWidth/2, padding + 35, canvasWidth/2 + 8, padding + 45);
// Bottom
bangPath.lineTo(canvasWidth/2 + 3, padding + 66);
bangPath.curveTo(canvasWidth/2, padding + 78, canvasWidth/2 - 3, padding + 66);
// Close path
bangPath.lineTo(canvasWidth/2 - 8, padding + 44);

Again the major difference between the two approaches are the methods quadraticCurveTo versus curveTo.

Exclamation 'Point'


To finish our bang character, we add a circle:

// Draw dot
var radius = 5;
var centerX = canvasWidth/2;
var centerY = this.padding + 84;
context.moveTo(centerX, centerY - radius);
context.quadraticCurveTo(centerX + radius, centerY - radius, centerX + radius, centerY);
context.quadraticCurveTo(centerX + radius, centerY + radius, centerX, centerY + radius);
context.quadraticCurveTo(centerX - radius, centerY + radius, centerX - radius, centerY);
context.quadraticCurveTo(centerX - radius, centerY - radius, centerX, centerY - radius);
context.closePath();
// Draw Dot
var radius:Number = 5;
var centerX:Number = canvasWidth/2;
var centerY:Number = padding + 84;
bangPath.moveTo(centerX, centerY - radius);
bangPath.curveTo(centerX + radius, centerY - radius, centerX + radius, centerY);
bangPath.curveTo(centerX + radius, centerY + radius, centerX, centerY + radius);
bangPath.curveTo(centerX - radius, centerY + radius, centerX - radius, centerY);
bangPath.curveTo(centerX - radius, centerY - radius, centerX, centerY - radius);

JavaScript and ActionScript have more efficient ways to create circles including the methods arc and drawCircle respectively.

Draw Inside the Lines


The paths are complete:

Warning Icon Path

In JavaScript and ActionScript and you won't actually see the path until assign a fill or stroke to them. The following code defines what the fills and strokes will look like:

// Background Gradient Fill
var backFill = context.createLinearGradient(0, this.padding, 0, this.padding + this.height);
backFill.addColorStop(0.55, this.primaryColor);
backFill.addColorStop(0.55, this.tertiaryColor);
backFill.addColorStop(1, this.secondaryColor + " transparent");

// Text and Stroke Fill 
bangFill = context.createLinearGradient(0, this.padding, 0, this.padding + this.height);
bangFill.addColorStop(0, "#555");
bangFill.addColorStop(1, "#333");

// Stroke
context.lineWidth = this.lineWidth;
context.lineJoin = "round";	
context.strokeStyle = bangFill;
// Background Gradient Fill 
var backFill:GraphicsGradientFill = new GraphicsGradientFill(); 
backFill.colors = [secondaryColor, tertiaryColor, primaryColor]; 
backFill.ratios = [iconHeight/2, iconHeight, iconHeight];
backFill.matrix = new Matrix();
backFill.matrix.createGradientBox(iconWidth, iconHeight, 3*Math.PI/2, 0,  padding); 

// Text and Stroke Fill 
var bangFill:GraphicsGradientFill = new GraphicsGradientFill(); 
bangFill.colors = [0x555555, 0x333333];  
bangFill.matrix = new Matrix(); 
bangFill.matrix.createGradientBox(iconWidth, iconHeight, Math.PI/2, 0, padding);
			
// Transparent Fill
var transparentFill:GraphicsSolidFill = new GraphicsSolidFill(); 
transparentFill.alpha = 0;
			
// Stroke
var stroke:GraphicsStroke = new GraphicsStroke(lineWidth); 
stroke.joints = JointStyle.ROUND;
stroke.fill = bangFill;

Draw


// Fill the background path
context.fillStyle = backFill;
context.fill();                    

// Stroke the inner border path
context.stroke();                    

// Fill the bang path
context.fillStyle = bangFill;
context.fill();	
// Fill and stroke all paths
var iconGraphics:Vector. = new Vector.(); 
iconGraphics.push(backFill, trianglePath, bangFill, bangPath, transparentFill, stroke, strokePath); 
graphics.drawGraphicsData(iconGraphics);

JavaScript applies the path fills on the HTML5 Canvas as each one is completed. ActionScript 3 can apply all path fills and strokes all at one time using the method drawGraphicsData.


We see the results below:

Warning Icon with no border

A Subtle Shadow


We are almost there, but there is something missing. Let's add a subtle shadow.

// Add a subtle shadow
context.shadowOffsetX = 0;
context.shadowOffsetY = 0;
context.shadowBlur = 10;
context.shadowColor = "#000000";
// Add a subtle shadow
filters = new Array(new DropShadowFilter(0, 0, 0x000000, 1, 10, 10));

Final Images


Warning Icon in JavaScript and ActionScript Compared

Download Source


References


iPhoneKer.com
Save up to 630$ when buy new iPhone 15

GateIO.gomymobi.com
Free Airdrops to Claim, Share Up to $150,000 per Project

https://tooly.win
Open tool hub for free to use by any one for every one with hundreds of tools

chatGPTaz.com, chatGPT4.win, chatGPT2.fun, re-chatGPT.com
Talk to ChatGPT by your mother language

Dall-E-OpenAI.com
Generate creative images automatically with AI

AIVideo-App.com
Render creative video automatically with AI

JavaScript by day


Google Safe Browsing McAfee SiteAdvisor Norton SafeWeb Dr.Web