JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tufte-css/1.1/tufte.css">
<body>
  <h2>Manipulate the Canvas</h2>
  <canvas id="myCanvas"
          width="300" height="300"
          style="border:1px solid #000000;"></canvas>
  <div id="draw_buttons">
    <button id="button_draw_triangle">Draw Triangle</button>
    <button id="button_draw_rotated_triangle">Draw Rotated Triangle</button>
    <button id="button_clear_canvas">Clear Canvas</button>
  </div>
</body>

CSS

body { margin: 20px; }
#container { display: block; }
#draw_buttons { float: left; width: 100%; margin-top: 10px; }

JavaScript

/* INSTRUCTIONS
The buttons should draw in the box.
You will need to:
1. Get the context of the <canvas> for drawing.
2. Draw a red triangle with black outline when the
   Draw Triangle button is clicked.
3. Draw a rotated red triangle with black outline when
   the Draw Rotated Triangle button is clicked.
4. Clear the <canvas> when the Clear Canvas button is clicked.
*/
$(document).ready(function() {

  /* Step 1: Your code goes here */


  $("#button_draw_triangle").click(function() {
    /* Your code goes here for Step 2 */

  });

  $("#button_draw_rotated_triangle").click(function() {
    /* Your code goes here for Step 3*/

  });

  $("#button_clear_canvas").click(function() {
    /* Your code goes here for Step 4 */

  });

});