<div class="container">
  <div>
    <button onClick="captureAll()">CAPTURE ALL</button>
    <button onClick="captureSkyBlue()">CAPTURE SKY BLUE</button>
  </div>
</div>

<div class="container">
  <h1>Lorem Ipsum</h1>
  <hr>

  <div id="skyblue">
    SKY BLUE
  </div>
  <div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ornare eu ex id varius. Sed et nisi cursus nibh iaculis dictum vel non nisi. Nunc sodales felis ut egestas scelerisque. Proin eu ante in lectus laoreet tempor. Fusce lacinia egestas enim, nec molestie velit pulvinar et. Aenean cursus purus in pulvinar pretium. Morbi at euismod arcu, sit amet pellentesque metus. Maecenas nisl tellus, sagittis non ligula nec, vulputate fringilla nunc. Quisque est arcu, porta ac suscipit sed, hendrerit et massa. Fusce blandit faucibus nisi, accumsan suscipit ipsum tempus vitae. Ut non maximus orci, ut tempus eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer risus diam, vulputate quis pulvinar ultrices, tincidunt a nulla.</p>

<p>Donec semper scelerisque neque quis placerat. Quisque ac neque sem. Aenean tristique diam ac dignissim mattis. Nullam fermentum nisl pellentesque lorem facilisis fermentum. Aenean rhoncus interdum erat sit amet suscipit. Mauris odio dolor, sodales eget imperdiet a, molestie ut lorem. Nam congue, urna quis suscipit mollis, lectus dolor fringilla leo, quis sagittis nibh lorem a tellus. Nunc egestas nunc sit amet turpis luctus, id tristique leo tristique.</p>

<p>Integer accumsan tortor risus, non viverra diam pretium sed. Phasellus et odio sit amet arcu lacinia iaculis sit amet non eros. Mauris ultricies augue vitae tincidunt hendrerit. Etiam vulputate scelerisque posuere. Nunc venenatis fringilla venenatis. Nunc mollis blandit nulla sagittis tincidunt. Morbi interdum ac massa id finibus. Fusce eget magna vel elit suscipit ultricies. Aenean suscipit neque in ipsum lacinia euismod. Suspendisse auctor neque est. Mauris et felis eu nulla iaculis pharetra pretium eu nisi. Suspendisse non lorem vitae enim euismod faucibus. Nulla arcu magna, placerat id pharetra at, vulputate eget arcu. Aliquam tempor diam est, eu pellentesque ex placerat ac. Fusce tempus elit nec urna molestie, quis porttitor nunc porta. Morbi non pellentesque est.</p>
  
</div>
  <hr>
</div>
h1 {
  font-family: 'Abril Fatface', cursive;
  font-size: 60px;
  line-height: 70px;
  text-align: center;
}

.container {
  max-width: 768px;
  margin: 0 auto;
}

.content {
  font-size: 22px;
  text-align: justify;
  margin: 0 0 15px 0;
  font-family: 'Moon Dance', cursive;
}

hr {
  margin: 20px 0;
}

#skyblue {
  height: 128px;
  background: lightskyblue;
  text-align: center;
  vertical-align: middle;
  line-height: 128px;
  font-size: 30px;
}

var captureAll = function() {
  html2canvas(document.body).then(canvas => {
    let link = document.createElement('a');
    link.download = 'screenshot.png';
    link.href = canvas.toDataURL();
    link.click();
  });
} 

var captureSkyBlue = function() {
  let component = document.getElementById("skyblue");
  html2canvas(component).then(canvas => {
    let link = document.createElement('a');
    link.download = 'skyblue.png';
    link.href = canvas.toDataURL();
    link.click();
  });
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.