HTML Canvas Samples
How do I make an html canvas samples?
What is a html canvas samples? How do you make a html canvas samples? This script and codes were developed by Mobile Application Design-Development on 10 August 2022, Wednesday.
HTML Canvas Samples Previews
HTML Canvas Samples - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>HTML Canvas Samples</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <p>Let's take a set of numbers and calculate the percentage that each number represents of the whole.</p>
<p>The height of the Canvas needs to be more than 100% of the height of the graph/chart. This Canvas is 400px high so let's use 300px as the number that represents 100% of the chart/graph height.</p>
<button id="btnNumbers" class="btn">Numbers</button>
<button id="btnLines" class="btn">Line Graph</button>
<button id="btnBars" class="btn">Bar Graph</button>
<button id="btnCircles" class="btn">Circles</button>
<button id="btnSquares" class="btn">Squares</button>
<button id="btnPie" class="btn">Pie Chart</button>
<button id="btnArc" class="btn">Arcs</button>
<br/> <br/>
<canvas id="myCanvas" height="400" width="600"></canvas>
<br/> <script src="js/index.js"></script>
</body>
</html>HTML Canvas Samples - Script Codes CSS Codes
canvas{ border: 2px dashed #333;
}
.btn{ padding:0.3rem 1rem; min-width: 8rem; margin: 0.5rem 1rem;
}HTML Canvas Samples - Script Codes JS Codes
var values = [12, 53, 46, 67.2, 32, 5, 77];
var total = 0;
var canvas, context;
for(var i=0; i<values.length; i++){ total += values[i];
}
//total is the sum of all the values
document.addEventListener("DOMContentLoaded", function(){ //set global vars for canvas and context canvas = document.querySelector("#myCanvas"); context = canvas.getContext("2d"); //add listeners for the buttons addButtonListeners(); //default action when it first loads //showPie(); document.querySelector("#btnNumbers").click();
});
function setDefaultStyles(){ //set default styles for canvas context.strokeStyle = "#333"; //colour of the lines context.lineWidth = 3; context.font = "bold 16pt Arial"; context.fillStyle = "#900"; //colour of the text context.textAlign = "left";
}
function highlightButton(btn){ var btns = document.querySelectorAll(".btn"); for(var i=0; i<btns.length; i++){ btns[i].style.fontWeight = 'normal'; } btn.style.fontWeight = 'bold';
}
function addButtonListeners(){ document.querySelector("#btnNumbers").addEventListener("click", showNumbers); document.querySelector("#btnLines").addEventListener("click", showLines); document.querySelector("#btnBars").addEventListener("click", showBars); document.querySelector("#btnCircles").addEventListener("click", showCircles); document.querySelector("#btnSquares").addEventListener("click", showSquares); document.querySelector("#btnPie").addEventListener("click", showPie); document.querySelector("#btnArc").addEventListener("click", showArcs);
}
function showNumbers(ev){ //highlight the clicked button if(ev){ highlightButton(ev.currentTarget); } //clear the canvas context.clearRect(0, 0, canvas.width, canvas.height); //set the styles in case others have been set setDefaultStyles(); var xpos = 40; var ypos = 40; context.fillText( "Values", xpos, ypos); //1. write out the numbers for(var i=0; i<values.length; i++){ ypos += 40; context.fillText( values[i].toString(), xpos, ypos); } //2. write out the total ypos += 40; context.fillText( total + " - total", xpos, ypos); //3. write out percentage of the total for each number ypos = 40; xpos += 250; context.fillText( "Percentage of total", xpos, ypos); for(var i=0; i<values.length; i++){ ypos += 40; var pct = (parseInt(values[i] / total * 10000))/100; context.fillText( pct.toString(), xpos, ypos); }
}
function showLines(ev){ //highlight the clicked button if(ev){ highlightButton(ev.currentTarget); } //clear the canvas context.clearRect(0, 0, canvas.width, canvas.height); //set the styles in case others have been set setDefaultStyles(); var numPoints = values.length; //how many points to draw on the line. var offsetX = 30; //space away from left edge of canvas to start drawing. var offsetY = 300; //bottom edge of the graph var spaceBetweenPoints = ((canvas.width - offsetX)/numPoints); //how far apart to make each x value. var graphHeight = 300; //use the percentage to calculate the height of the next point on the line //values[0] is the moveTo point. //values[1] is the first lineTo point. var x = 0 + offsetX; var y = offsetY - (graphHeight * (values[0]/total)); context.moveTo(x, y); context.beginPath(); for(var i=0; i<values.length; i++){ var pct = values[i] / total; y = offsetY - (graphHeight * (values[i]/total)); context.lineTo(x, y); //for the first point the moveTo and lineTo values are the same //to add labels take the same x position but go up or down 30 away from the y value //use the percentage to decide whether to go up or down. 20% or higher write below the line var lbl = Math.round(pct * 100).toString(); if(pct <= .2){ context.fillText(lbl, x, y - 30); }else{ context.fillText(lbl, x, y + 30); } x = x + spaceBetweenPoints; //move the x value for the next point } context.stroke(); //now draw the x and y lines for the chart context.strokeStyle = "#999"; context.lineWidth = 1; context.beginPath(); context.moveTo(offsetX, canvas.height-graphHeight); context.lineTo(offsetX, graphHeight); context.lineTo(canvas.width-offsetX, graphHeight); context.stroke();
}
function showBars(ev){ //highlight the clicked button if(ev){ highlightButton(ev.currentTarget); } //clear the canvas context.clearRect(0, 0, canvas.width, canvas.height); //set the styles in case others have been set setDefaultStyles(); //the percentage of each value will be used to determine the height of the bars. var graphHeight = 300; //bottom edge of the graph var offsetX = 30; //space away from left edge of canvas to start drawing. var barWidth = 30; //width of each bar in the graph var spaceBetweenPoints = 20; //how far apart to make each x value. //start at values[1]. //values[0] is the moveTo point. var x = offsetX + 20; //left edge of first rectangle //var y = offsetY - (graphHeight * (values[0]/100)); //start a new path context.beginPath(); for(var i=0; i<values.length; i++){ var pct = values[i] / total; var barHeight = (graphHeight * pct); //(x, y) coordinates for a rectangle are the top, left values unless you do negative values for w, h context.rect(x, graphHeight-1, barWidth, -1 * barHeight); //for the first point the moveTo and lineTo values are the same //All the labels for the bars are going above the bars var lbl = Math.round(pct * 100).toString(); context.fillText(lbl, x, graphHeight - barHeight - 30-1); x = x + barWidth + spaceBetweenPoints; //move the x value for the next point } context.stroke(); //draw lines around bars context.fill(); //fill colours inside the bars context.strokeStyle = "#999"; context.lineWidth = 1; context.beginPath(); context.moveTo(offsetX, canvas.height-graphHeight); context.lineTo(offsetX, graphHeight); context.lineTo(canvas.width-offsetX, graphHeight); context.stroke();
}
function showCircles(ev){ //highlight the clicked button if(ev){ highlightButton(ev.currentTarget); } //clear the canvas context.clearRect(0, 0, canvas.width, canvas.height); //set the styles in case others have been set setDefaultStyles(); var numPoints = values.length; //number of circles to draw. var padding = 15; //space away from left edge of canvas to start drawing. var magnifier = 15; var horizontalAxis = canvas.height/2; //how far apart to make each x value. //use the percentage to calculate the height of the next point on the line //start at values[1]. //values[0] is the moveTo point. var currentPoint = 0; //this will become the center of each cirlce. var x = 0; var y = horizontalAxis;//center y point for circle var colour = "#00FF00"; for(var i=0; i<values.length; i++){ //the percentages will be used to create the area of the circles //using the radius creates way too big a range in the size var pct = Math.round((values[i] / total) * 100); // the fill colour will be a shade of yellow // For shades of yellow the Reds should be E0 - FF, // Greens should be less C0 - D0 // blues are based on the percentage var a = (0xD0 + Math.round(Math.random() * 0x2F)); var b = (0xD0 + Math.round(Math.random() * 0x2F)); var red = Math.max(a, b).toString(16); var green = Math.min(a, b).toString(16); var blue = ( Math.floor(pct * 2.55) ).toString(16); if(red.length==1)red= "0" + red; if(green.length==1)green= "0" + green; if(blue.length==1)blue="0"+blue; colour = "#" + red + green + blue; // area = Math.PI * radius * radius // radius = Math.sqrt( area / Math.PI ); var radius = Math.sqrt(pct / Math.PI ) * magnifier; // magnifier makes all circles bigger x = currentPoint + padding + radius; //center x point for circle //draw the circle context.beginPath(); context.fillStyle = colour; //colour inside the circle set AFTER beginPath() BEFORE fill() context.strokeStyle = "#333"; //colour of the lines context.lineWidth = 3; context.arc(x, y, radius, 0, Math.PI * 2, false); context.closePath(); context.fill(); //fill comes before stroke context.stroke(); //to add labels take the same x position but go up or down 30 away from the y value //use the percentage to decide whether to go up or down. 20% or higher write below the line var lbl = pct.toString(); context.font = "normal 12pt Arial"; context.textAlign = "center"; context.fillStyle = "#000000"; //colour inside the circle context.beginPath(); context.fillText(lbl, x, y+6); context.closePath(); currentPoint = x + radius; //move the x value to the end of the circle for the next point }
}
function showSquares(ev){ //highlight the clicked button if(ev){ highlightButton(ev.currentTarget); } //clear the canvas context.clearRect(0, 0, canvas.width, canvas.height); //set the styles in case others have been set setDefaultStyles(); var numPoints = values.length; //number of squares to draw. var padding = 10; //space between each square var start = padding; //this is the left edge of the first square var y = 10; var colour = "#00FF00"; context.fillStyle = colour; //colour inside the square context.strokeStyle = "#333"; //colour of the lines context.lineWidth = 1; var renderingArea = canvas.width - 20 - (padding *numPoints); //total space on the canvas to be used for the squares for(var i=0; i<values.length; i++){ var pct = (values[i] / total); var side = renderingArea * pct; context.save(); //save the current orientation of the canvas context.beginPath(); var angle = pct * (Math.PI / 2); context.translate(start, 10); context.rotate(angle); context.rect(0, 0, side, side); context.fill(); context.stroke(); context.restore(); // console.log( start ); start = start + side + padding; y = y + (100 * pct); }
}
function showPie(ev){ //highlight the clicked button if(ev){ highlightButton(ev.currentTarget); } //clear the canvas context.clearRect(0, 0, canvas.width, canvas.height); //set the styles in case others have been set setDefaultStyles(); var cx = canvas.width/2; var cy = canvas.height/2; var radius = 100; var currentAngle = 0; //the difference for each wedge in the pie is arc along the circumference //we use the percentage to determine what percentage of the whole circle //the full circle is 2 * Math.PI radians long. //start at zero and travelling clockwise around the circle //start the center for each pie wedge //then draw a straight line out along the radius at the correct angle //then draw an arc from the current point along the circumference //stopping at the end of the percentage of the circumference //finally going back to the center point. for(var i=0; i<values.length; i++){ var pct = values[i]/total; //create colour 0 - 16777216 (2 ^ 24) based on the percentage var intColour = parseInt(pct * 16777216); //console.log(intColour); var red = ((intColour >> 16) & 255); var green = ((intColour >> 8) & 255); var blue = (intColour & 255); //console.log(red, green, blue); var colour = "rgb(" + red +"," + green+"," + blue+")"; //console.log(colour); //draw the arc var endAngle = currentAngle + (pct * (Math.PI * 2)); context.moveTo(cx, cy); context.beginPath(); context.fillStyle = colour; context.arc(cx, cy, radius, currentAngle, endAngle, false); context.lineTo(cx, cy); context.fill(); //Now draw the lines that will point to the values context.save(); context.translate(cx, cy);//make the middle of the circle the (0,0) point context.strokeStyle = "#0CF"; context.lineWidth = 1; context.beginPath(); //angle to be used for the lines var midAngle = (currentAngle + endAngle)/2;//middle of two angles context.moveTo(0,0);//this value is to start at the middle of the circle //to start further out... var dx = Math.cos(midAngle) * (0.8 * radius); var dy = Math.sin(midAngle) * (0.8 * radius); context.moveTo(dx, dy); //ending points for the lines var dx = Math.cos(midAngle) * (radius + 30); //30px beyond radius var dy = Math.sin(midAngle) * (radius + 30); context.lineTo(dx, dy); context.stroke(); //put the canvas back to the original position context.restore(); //update the currentAngle currentAngle = endAngle; }
}
function showArcs(ev){ //highlight the clicked button if(ev){ highlightButton(ev.currentTarget); } //copy the array so we can work with a sorted version var values_copy = values; values_copy.sort(function(a, b){return a-b}); //clear the canvas context.clearRect(0, 0, canvas.width, canvas.height); //set the styles in case others have been set setDefaultStyles(); var cx = canvas.width/2; var cy = canvas.height/2; var radius = 40; var gap = 20 var startAngle = 0; for(var i=0; i<values_copy.length; i++){ //find the percentage of the total for each value //var pct = values_copy[i]/total; //just use each value as a percentage var pct = values_copy[i]/100; //create colour 0 - 16777216 (2 ^ 24) based on the percentage var intColour = parseInt(pct * 16777216); var red = ((intColour >> 16) & 255); var green = ((intColour >> 8) & 255); var blue = (intColour & 255); var colour = "rgb(" + red + "," + green + "," + blue + ")"; //they will all start at zero degrees (zero radians) var endAngle = startAngle + (pct * (Math.PI * 2)); console.log(values_copy[i], total, pct, endAngle); context.moveTo(cx+radius, cy); context.beginPath(); context.strokeStyle = colour; context.lineWidth = 10; context.arc(cx, cy, radius, startAngle, endAngle, false); context.stroke(); context.closePath(); radius += 20; }
}
| Developer | Mobile Application Design-Development |
| Username | mad-d |
| Uploaded | August 10, 2022 |
| Rating | 3 |
| Size | 5,370 Kb |
| Views | 28,336 |
Do you need developer help for HTML Canvas Samples?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Mobile Application Design-Development (mad-d) Script Codes
| Name | Size |
| Mad9013 - column starter | 2,370 Kb |
| Navigation Tabs | 3,053 Kb |
| Sept 29, 2017 complete | 2,972 Kb |
| Two-Column Form | 2,518 Kb |
| Closure Failure | 1,933 Kb |
| Contact Manager | 2,409 Kb |
| MAD9013-Sass Equal Spaced Layout Mixin | 2,538 Kb |
| HTML Modal Windows | 2,995 Kb |
| Party Starter | 1,676 Kb |
| MAD9013-F2015-Midterm | 4,641 Kb |
Create amazing marketing copy with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| CardMove | Thompsonemerson | 3,699 Kb |
| Emberjs Bootstrap Modal Carousel | Somethingkindawierd | 4,233 Kb |
| Buttons for autumn | Nikazawila | 1,795 Kb |
| Airbnb Homepage | SindhujaD | 2,480 Kb |
| Faux column absolute wrapper | Yurimorini | 1,823 Kb |
| Static Image to Video Block | Grayghostvisuals | 4,864 Kb |
| Google Fonts Sass Mixin | HugoGiraudel | 4,237 Kb |
| Apex Calculator | Michaelwnelson | 2,370 Kb |
| Iron Man SVG Loading Animation | Andythayer | 3,069 Kb |
| Fixed Scrolling Nav Bar | Philsinatra | 0 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!