{"id":1539,"date":"2025-03-17T11:45:09","date_gmt":"2025-03-17T11:45:09","guid":{"rendered":"https:\/\/emojifaces.org\/blog\/?p=1539"},"modified":"2025-03-17T11:58:19","modified_gmt":"2025-03-17T11:58:19","slug":"resolved-draw-rectangle-set-border-width-and-fill-with-color","status":"publish","type":"post","link":"https:\/\/emojifaces.org\/blog\/2025\/03\/17\/resolved-draw-rectangle-set-border-width-and-fill-with-color\/","title":{"rendered":"[RESOLVED] Draw rectangle, set border width and fill with color"},"content":{"rendered":"

Drawing a rectangle, setting its border width, and filling it with color is a fundamental aspect of graphics programming. Whether you are working with HTML5 Canvas<\/i>, SVG<\/i>, or CSS<\/i>, understanding how to achieve this effect will help you create visually appealing designs and user interfaces. In this article, we will explore different ways to draw a rectangle, customize its appearance, and use colors effectively.<\/p>\n

Using HTML5 Canvas<\/h2>\n

The HTML5 <canvas><\/code> element provides a powerful way to create 2D graphics using JavaScript. To draw a rectangle and style it properly, follow these steps:<\/p>\n

    \n
  1. Create a <canvas><\/code> element in your HTML.<\/li>\n
  2. Access the canvas using JavaScript and obtain the drawing context.<\/li>\n
  3. Draw your rectangle using the fillRect()<\/code> method.<\/li>\n
  4. Set the border width and stroke color using lineWidth<\/code> and strokeStyle<\/code>.<\/li>\n
  5. Use the fillStyle<\/code> property to define the fill color.<\/li>\n<\/ol>\n

    Here\u2019s a simple example:<\/p>\n

    \n<canvas id=\"myCanvas\" width=\"200\" height=\"150\"><\/canvas>\n<script>\n  var canvas = document.getElementById(\"myCanvas\");\n  var ctx = canvas.getContext(\"2d\");\n\n  \/\/ Set fill color\n  ctx.fillStyle = \"lightblue\";\n  ctx.fillRect(20, 20, 150, 100);\n\n  \/\/ Set border width and color\n  ctx.lineWidth = 5;\n  ctx.strokeStyle = \"black\";\n  ctx.strokeRect(20, 20, 150, 100);\n<\/script>\n<\/code><\/pre>\n
    This will create a light blue rectangle with a black border that is 5 pixels wide.<\/p>\n\"\"\n
    Using SVG<\/h2>\n
    SVG (Scalable Vector Graphics) is another way to create rectangles in web design. It allows for high-quality rendering without losing resolution. Here\u2019s how you can create an SVG rectangle:<\/p>\n
    \n<svg width=\"200\" height=\"150\">\n  <rect x=\"20\" y=\"20\" width=\"150\" height=\"100\" \n        fill=\"lightblue\" stroke=\"black\" stroke-width=\"5\"\/>\n<\/svg>\n<\/code><\/pre>\n
    In this example:<\/p>\n