JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <div id="content_wrapper">
      <div id="canvasdraw" class="drawing">
				<div class="bg-picker">
					<img type="image" onClick="change_background(this)" class="bg-item" src="upload/img/backgrounds/image1.png" />
					<img type="image" onClick="change_background(this)" class="bg-item" src="upload/img/backgrounds/image2.png" />
					<img type="image" onClick="change_background(this)" class="bg-item" src="upload/img/backgrounds/image3.png" />
				</div>
				<canvas id="canvas"></canvas>
				<div class="tools">
					<button onClick="undo_last()" type="button" class="button">Rückgängig</button>
					<button onClick="action_clear_canvas()" type="button" class="button">Zurücksetzen</button>
					
					<div onClick="change_color(this)" class="color-field" style="background: red;"></div>
					<div onClick="change_color(this)" class="color-field" style="background: blue;"></div>
					<div onClick="change_color(this)" class="color-field" style="background: green;"></div>
					<div onClick="change_color(this)" class="color-field" style="background: yellow;"></div>
					
					<input onInput="draw_color = this.value" type="color" class="color-picker">
					<input onInput="draw_width = this.value"type="range" min="1" max="100" class="pen-range">
				</div>
			</div>
  </div>
</body>

CSS

@import url('https://fonts.googleapis.de/css?family=Mukta');

body {
  background: #888;
}

#content_wrapper {
  margin: 0 auto;
  width: 920px;
  margin-top:200px;
  margin-bottom: 1000px;
}

.bg-picker {
    display: flex;
    justify-content: center;
    flex-direction: row;
    margin-top: 15px;      
}
.bg-picker .bg-item {
    height: 140px;
    width: 140px;
    min-height: 140px;
    min-width: 140px;
    cursor: pointer;
    box-sizing: border-box;
    border-radius: 0;
    border: 2px solid white;
    align-self: center;    
    margin: 0 10px;    
}

canvas {
	box-shadow: none;
    cursor: crosshair;
    background-color: #ffffff;
    background-repeat: no-repeat;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
	border: 3px solid #777;
}

.tools {
    display: flex;
    justify-content: center;
    flex-direction: row;
    margin-top: 15px;    
}

.tools .color-field {
    height: 40px;
    width: 40px;
    min-height: 40px;
    min-width: 40px;
    cursor: pointer;
    box-sizing: border-box;
    border-radius: 50%;
    border: 2px solid white;
    align-self: center;    
    margin: 0 10px;
}

.tools .button {
    align-self: center;
    width: 100px;
    height: 40px;
    border: 2px solid white;
    cursor: pointer;
    color: white;
    background: #222;
    font-weight: bold;
    margin: 0 10px;
}

.color-picker {
    align-self: center;
    margin: 0 10px;
    height: 50px;
}

.color-range {
    align-self: center;
    margin: 0 10px;
}

JavaScript

const canvas = document.getElementById("canvas");
const content_wrapper = document.getElementById("content_wrapper");
canvas.width = content_wrapper.clientWidth;
canvas.height = content_wrapper.clientWidth * 0.65;

let context = canvas.getContext("2d");
let start_background_color = "transparent";
context.fillStyle = start_background_color;
context.fillRect(0,0 , canvas.width, canvas.height);

let draw_color = "black";
let draw_width = "2";
let is_drawing = false;

let restore_array = [];
let index = -1;

function change_color(element) {
    draw_color = element.style.backgroundColor;
}

function change_background(element) {
    if ( index >= 0 ) {
        if (confirm("Soll der Hintergrund wirklich geändert werden?\nDie bisherigen Eingaben werden gelöscht!")) {
            clear_canvas();
            canvas.style.backgroundImage = "url('" + element['src'] + "')";
        }
    }
    else {
        canvas.style.backgroundImage = "url('" + element['src'] + "')";
    }
}

canvas.addEventListener("touchstart", start, false);
canvas.addEventListener("touchmove", draw, false);
canvas.addEventListener("mousedown", start, false);
canvas.addEventListener("mousemove", draw, false);

canvas.addEventListener("touchend", stop, false);
canvas.addEventListener("mouseup", stop, false);
canvas.addEventListener("mouseout", stop, false);

function start(event) {    
    is_drawing = true;
    context.beginPath();
    context.moveTo(event.clientX - canvas.offsetLeft,
                   event.clientY - canvas.offsetTop);
    event.preventDefault();    
}

function draw(event){
    if ( is_drawing ) {
        context.lineTo(event.clientX - canvas.offsetLeft,
                       event.clientY - canvas.offsetTop);
        context.strokeStyle = draw_color;
        context.lineWidth = draw_width;
        context.lineCap = "round";
        context.lineJoin = "round";
        context.stroke();        
    }
}

function stop(event) {
    if ( is_drawing ) {
        context.stroke();
      ...