Cacher is the code snippet organizer for pro developers

canvas {
       border: 1px solid black;
       padding-left: 0;
       padding-right: 0;
       margin-left: auto;
       margin-right: auto;
       display: block;
       width: 500px;
}

h1 {
      text-align: center;
}

/*By using the function call drawBasicCar (x, y), you can draw multiple cars on the canvas.*/

var canvas, ctx, w, h;
var basicCarX, basicCarY;

window.onload = function init () {
  canvas = document.querySelector("#drivingSimulatorCanvas");
  
  w = canvas.width; 
  h = canvas.height;
  
  ctx = canvas.getContext ('2d');
  
  drawBasicCar(200, 200);
}


//Functions

function drawBasicCar (basicCarX, basicCarY) {
  
    ctx.save();
  
    //basicCarX and basicCarY refer to the top left corner of the car body.
    ctx.translate(basicCarX, basicCarY);
  
    var width = 80;
    var height = 35;
    
    //Car body
    ctx.fillStyle = 'gray';
    ctx.fillRect (0, 0, width, height);
  
    //Car wheels
    roundRect (3, 35, 13, 16, {
    tr:0,
    tl:0,
    br:5,
    bl:5
    }, true, false);
    roundRect (64, 35, 13, 16, {
    tr:0,
    tl:0,
    br:5,
    bl:5
  }, true, false);
  
    //Roof top
    ctx.beginPath();
    ctx.lineCap="round";
    ctx.lineWidth="7";
    ctx.strokeStyle="gray";
    ctx.moveTo(10, -25);
    ctx.lineTo(width - 10, -25);
    ctx.stroke();
  
    //Roof left side
    ctx.beginPath();
    ctx.moveTo(10, -25);
    ctx.lineTo(0, 0);
    ctx.stroke();
  
    //Roof right side
    ctx.beginPath();
    ctx.moveTo(width - 10, -25);
    ctx.lineTo(width, 0);
    ctx.stroke();
  
    //Rearview mirrors
    roundRect(-11, 2, 11, 10, 3, true, false);
    roundRect(width - 1, 2, 11, 10, 3, true, false);
  
    //Brake lights
    ctx.fillStyle = '#8b0000';
    ctx.fillRect (0, -5 + (height/2), 25, 10);
    ctx.fillRect (width-25, -5 + (height/2), 25, 10);
    
  
    //Driver's body
    ctx.fillStyle = 'black';
    roundRect(12, -7, 20, 7, {
    tl:5,
    tr:5,
    bl:0,
    br:0
    }, true, false);
  
    //Driver's head
    ctx.beginPath();
    ctx.arc(21.5, -13.9, 6, 0, 2*Math.PI);
    ctx.fill();
  
    ctx.restore();
    
}


/**
Explanation for function "roundRect" below (function code and explanation from Juan Mendes - https://stackoverflow.com/questions/1255512/how-to-draw-a-rounded-rectangle-on-html-canvas):

 * Draws a rounded rectangle using the current state of the canvas.
 * If you omit the last three params, it will draw a rectangle
 * outline with a 5 pixel border radius
 * @param {Number} x The top left x coordinate
 * @param {Number} y The top left y coordinate
 * @param {Number} width The width of the rectangle
 * @param {Number} height The height of the rectangle
 * @param {Number} [radius = 5] The corner radius; It can also be an object 
 *                 to specify different radii for corners
 * @param {Number} [radius.tl = 0] Top left
 * @param {Number} [radius.tr = 0] Top right
 * @param {Number} [radius.br = 0] Bottom right
 * @param {Number} [radius.bl = 0] Bottom left
 * @param {Boolean} [fill = false] Whether to fill the rectangle.
 * @param {Boolean} [stroke = true] Whether to stroke the rectangle.
 */

function roundRect(x, y, width, height, radius, fill, stroke) {
  
  ctx.save();
  
  if (typeof stroke == 'undefined') {
    stroke = true;
  }
  
  if (typeof radius === 'undefined') {
    radius = 5;
  }
  
  if (typeof radius === 'number') {
    radius = {tl: radius, tr: radius, br: radius, bl: radius};
  } 
  else {
    var defaultRadius = {tl: 0, tr: 0, br: 0, bl: 0};
    for (var side in defaultRadius) {
      radius[side] = radius[side] || defaultRadius[side];
    }
  }
  
  ctx.beginPath();
  ctx.moveTo(x + radius.tl, y);
  ctx.lineTo(x + width - radius.tr, y);
  ctx.quadraticCurveTo(x + width, y, x + width, y + radius.tr);
  ctx.lineTo(x + width, y + height - radius.br);
  ctx.quadraticCurveTo(x + width, y + height, x + width - radius.br, y + height);
  ctx.lineTo(x + radius.bl, y + height);
  ctx.quadraticCurveTo(x, y + height, x, y + height - radius.bl);
  ctx.lineTo(x, y + radius.tl);
  ctx.quadraticCurveTo(x, y, x + radius.tl, y);
  ctx.closePath();
  if (fill) {
    ctx.fill();
  }
  if (stroke) {
    ctx.stroke();
  }
  
  ctx.restore();

}

 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset = "UTF-8">
  <title>Driving Simulator first part</title>
</head>

<body>
  
  <header>
     <h1>Try drawing multiple cars!</h1>
  </header>
  
  <section>
    <canvas id="drivingSimulatorCanvas" width="500" height="500">
      <!--Just in case the canvas is not supported or the internet is super slow-->
      Canvas is not supported by your browser.  Try a newer browser or updating your browser to a newer version.
    </canvas>
  </secton>
  
</body>
  
</html>