Hosting Solutions
mobile_logo Table of Contents

Line Styles for Lines and Strokes

In this third exercise we will focus on line styles. There are several properties in JavaScript available that allow us to manipulate the way lines and strokes appear on our canvas element. Create dashed lines, offset dashes, miter effects, rounded effects and more. <!DOCTYPE html> <html> <head> <style> body{ margin:40px; background:#666; } #canvas1{ background:#FFF; border:#000 1px solid; } </style> <script> function draw() { var canvas = document.getElementById("canvas1"); var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.lineWidth = 20; ctx.lineCap = "round"; // butt, round, square ctx.lineJoin = "miter"; // bevel, round, miter ctx.miterLimit = 2; ctx.setLineDash([20,10,30,10,40,10]); ctx.lineDashOffset = 10; ctx.moveTo(150,150); ctx.lineTo(240,240); ctx.lineTo(240,40); ctx.stroke(); } window.onload = draw; </script> </head> <body> <canvas id="canvas1" width="500" height="400"></canvas> </body> </html>

JavaScript Videos

Canvas Programming

2D Context Object and Rectangle MethodsFill and Stroke Styles Color Gradient PatternLine Styles for Lines and StrokesBuilding and Drawing PathsDrawing Images and VideosDrawing Text on CanvasRendering Shadows on CanvasCanvas Transformation EffectsPixel Manipulation on CanvasCompositing on the CanvasDynamic Centering and Alignment on the CanvasCanvas Animation and App InitializationObject Oriented Assets OOP on CanvasDetect Mouse Coordinates on CanvasAnimated Background Layers on Canvas TutorialKeyboard Control and MovementJSON Object Arrays and Loops on CanvasHit Detection Mouse Touch Over Object ArraysCollision Detection Hit Game EnemiesParticle Effect System Tutorial Snow Falling AnimationInteractive Canvas Imaging Applications JavaScript PHP TutorialCircular Progress Loader Canvas JavaScript Programming Tutorial