// canvas definition standard variables canvas = document.getElementById('canvasArea'); context=canvas.getContext("2d"); // a2. layout parameters var xPos = 25; var yPos = 25 var width = 150; var height = 75; var radius = 30; // a3. attributes of lines and arc context.strokeStyle = "red"; context.lineWidth = 20; context.lineCap = "square"; context.shadowOffsetX = 3; context.shadowOffsetY =3; context.shadowBlur = 5; context.shadowColor = "gray"; // a4. starting point context.beginPath(); context.moveTo(xPos, yPos); // a5. top line path context.lineTo(xPos+width - radius, yPos); // a6. corner arc path context.arcTo(xPos + width, yPos, xPos+width, yPos+radius, radius); //a7. side line path context.lineTo(xPos+width, yPos+height); //a8. draw image context.stroke();