How to get rid of margin of HTML Canvas element?
<p>I was trying to make a electronic resistor image with canvas for my next project.
Now I have gave it a resistor shape, but I was not able to remove the margin.</p>

<p>I've tried setting padding and margin to the value <code>0px</code>. But not seems to work.</p>

<p>My HTML/CSS Code:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.canvas-wire {
  border: 1px solid #a09898;
  background-color: #a09898;
  vertical-align: middle;
  margin: 0;
  padding: 0;
}
.canvas-film-1 {
  border-radius: 8px 0px 0px 8px;
  background: linear-gradient(#FFEB3B, #FF9800);
  vertical-align: middle;
  margin: 0;
  padding: 0;
}
.canvas-film-2 {
  border-radius: 0px 8px 8px 0px;
  background: linear-gradient(#FFEB3B, #FF9800);
  vertical-align: middle;
  margin: 0;
  padding: 0;
}
.canvas-film-mid {
  background: linear-gradient(#FFEB3B, #FF9800);
  vertical-align: middle;
  margin: 0;
  padding: 0;
}
.metal {
  position: relative;
  text-shadow: hsla(0, 0%, 40%, .5) 0 -1px 0, hsla(0, 0%, 100%, .6) 0 2px 1px;
  background-color: hsl(0, 0%, 90%);
  margin: 0;
  padding: 0;
}
.metal.linear {
  background-image: -webkit-repeating-linear-gradient(left, hsla(0, 0%, 100%, 0) 0%, hsla(0, 0%, 100%, 0) 6%, hsla(0, 0%, 100%, .1) 7.5%), -webkit-repeating-linear-gradient(left, hsla(0, 0%, 0%, 0) 0%, hsla(0, 0%, 0%, 0) 4%, hsla(0, 0%, 0%, .03) 4.5%), -webkit-repeating-linear-gradient(left, hsla(0, 0%, 100%, 0) 0%, hsla(0, 0%, 100%, 0) 1.2%, hsla(0, 0%, 100%, .15) 2.2%), linear-gradient(180deg, hsl(0, 0%, 78%) 0%, hsl(0, 0%, 90%) 47%, hsl(0, 0%, 78%) 53%, hsl(0, 0%, 70%)100%);
  margin: 0;
  padding: 0;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div style="background-color: black; padding: 5px 10px; width: 900px; height:500px;"&gt;

  &lt;canvas class="canvas-wire metal linear" width="200px" height="5px"&gt;&lt;/canvas&gt;

  &lt;canvas class="canvas-film-1" width="20px" height="30px"&gt;&lt;/canvas&gt;

  &lt;canvas id="canvas-band1" width="7px" height="30px" style="background-color: red; vertical-align: middle;"&gt;&lt;/canvas&gt;

  &lt;canvas class="canvas-film-mid" width="20px" height="30px"&gt;&lt;/canvas&gt;

  &lt;canvas id="canvas-band2" width="7px" height="30px" style="background-color: red; vertical-align: middle;"&gt;&lt;/canvas&gt;

  &lt;canvas class="canvas-film-mid" width="20px" height="30px"&gt;&lt;/canvas&gt;

  &lt;canvas id="canvas-band3" width="7px" height="30px" style="background-color: red; vertical-align: middle;"&gt;&lt;/canvas&gt;

  &lt;canvas class="canvas-film-mid" width="20px" height="30px"&gt;&lt;/canvas&gt;

  &lt;canvas id="canvas-band4" width="7px" height="30px" style="background-color: red; vertical-align: middle;"&gt;&lt;/canvas&gt;

  &lt;canvas class="canvas-film-2" width="20px" height="30px"&gt;&lt;/canvas&gt;

  &lt;canvas class="canvas-wire metal linear" width="200px" height="5px"&gt;&lt;/canvas&gt;

&lt;/div&gt;</code></pre>
</div>
</div>
</p>