### Install html2canvas-pro

Source: https://github.com/yorickshan/html2canvas-pro/blob/main/README.md

Install the html2canvas-pro package using npm, pnpm, or yarn.

```sh
npm install html2canvas-pro
pnpm / yarn add html2canvas-pro
```

--------------------------------

### Basic Box Shadow Examples

Source: https://github.com/yorickshan/html2canvas-pro/blob/main/tests/reftests/background/box-shadow.html

Demonstrates various configurations of the box-shadow property, including offset, blur, and spread.

```css
0 0 0 0.5em;
```

```css
0 0 1em;
```

```css
1em 0.5em;
```

```css
1em 0.5em 1em;
```

```css
0 2em 1em -0.7em;
```

```css
0.3em 0.3em lightgreen;
```

```css
0.3em 0.3em 0 0.6em lightgreen;
```

```css
0 2em 0 -0.9em lightgreen;
```

```css
2em 1.5em 0 -0.7em lightgreen;
```

```css
9em 1.2em 0 -0.6em lightgreen;
```

```css
-27.3em 0 lightgreen;
```

```css
0 2em 0 -1em lightgreen;
```

```css
0 0 1em maroon;
```

```css
0 0 1em 0.5em maroon;
```

```css
0 0 1em 1em maroon;
```

```css
-0.4em -0.4em 1em olive;
```

```css
0.4em 0.4em 1em olive;
```

```css
0.4em 0.4em 1em -0.2em olive;
```

```css
0.4em 0.4em 1em 0.4em olive;
```

```css
0 1.5em 0.5em -1em olive;
```

--------------------------------

### Install HTML2Canvas

Source: https://github.com/yorickshan/html2canvas-pro/blob/main/tests/reftests/text/text.html

Command to install the html2canvas library using npm.

```bash
npm install --save html2canvas
```

--------------------------------

### Example Mixed-Case Class Names

Source: https://github.com/yorickshan/html2canvas-pro/blob/main/tests/reftests/css/class-name-case.html

These are examples of mixed-case class names that should be correctly applied by the CSS.

```html
.card--Highlight
```

```html
.block__Element--Modifier
```

--------------------------------

### CSS Broken Animation Example

Source: https://github.com/yorickshan/html2canvas-pro/blob/main/tests/reftests/animation.html

Demonstrates a CSS animation with a different keyframe and paused playback state. This highlights variations in animation setup.

```css
.animated.broken p {
  animation-name: rotate45;
  animation-duration: 1ms;
  animation-play-state: paused;
}
```

--------------------------------

### Negative and Full Rotation with CSS

Source: https://github.com/yorickshan/html2canvas-pro/blob/main/tests/reftests/rotate/css-rotate-property.html

Shows examples of applying negative rotations and a full 360-degree rotation using the 'rotate' property.

```css
.rotate-negative {
  rotate: -45deg;
}
```

```css
.rotate-360 {
  rotate: 360deg;
}
```

--------------------------------

### Setup Function for Font and Size Testing

Source: https://github.com/yorickshan/html2canvas-pro/blob/main/tests/reftests/text/underline-lineheight.html

Sets up the body with divs containing different font families and increasing font sizes to test rendering.

```javascript
function setUp() { $("body").empty(); $.each(["arial","verdana","tahoma","courier new"],function(i,e){ var div = $("<div />").css("font-family",e).appendTo("body"); for(var i=0;i<=10;i++){ $("<div />").text("Testing texts").css("margin-top",1).css("font-size",(16+i*6)).appendTo(div); } }); }
```

--------------------------------

### Inset Box Shadow Examples

Source: https://github.com/yorickshan/html2canvas-pro/blob/main/tests/reftests/background/box-shadow.html

Illustrates the use of inset box shadows, which appear inside the element's border.

```css
inset 0.2em 0.4em red, inset -1em -0.7em red;
```

```css
inset 11em 0 red;
```

```css
inset -1em 0 red;
```

```css
inset 13em 0 3em -3em orange,inset -3em 0 3em -3em blue;
```

```css
inset 11em 0 2em orange;
```

```css
inset 0 0.3em red;
```

```css
inset 0 -1.1em red;
```

```css
inset 1em 0 1em -1em blue;
```

```css
inset 0 0 0.5em blue;
```

```css
inset 0 0 2em blue;
```

```css
inset 0 2em 3em -1em green;
```

```css
inset 0 2em 3em -2em green;
```

```css
inset 0 2em 3em -3em green;
```

```css
inset 0 0 1em khaki;
```

```css
inset 0 0 1em khaki, inset 0 0 1em khaki, inset 0 0 1em khaki, inset 0 0 1em khaki;
```

```css
inset 0 0 0.5em 0.5em khaki;
```

```css
inset 0 0 2em 2em khaki;
```

```css
inset 0 0 0.5em 0.5em indigo, 0 0 0.5em 0.5em indigo;
```

```css
inset 0 0 1em black, inset 0 0 1em black, inset 0 0 1em black, inset 0 0 1em black;
```

```css
inset 0 0 0.7em 0.5em black; /* should be very similar to above */
```

```css
inset 0 2em 3em -1.5em green, inset 0 -2em 3em -2em blue;
```

```css
inset 1em 1em 2em -1em blue;
```

```css
inset 1em 1em 2em -1em blue, inset -1em -1em 2em -1em red;
```

```css
inset 0 2em 3em -2em white, inset 0 -2em 3em -2.5em black;
```

```css
inset 1em 1em 1em -1em white, inset -1em -1em 1em -1em black;
```

```css
inset -1em -1em 1em -1em black, inset 1em 1em 1em -1em white;
```

```css
inset -0.3em -0.3em 0.6em rgba(0,0,0,0.5), inset 0.3em 0.3em 0.6em rgba(256,256,256,0.7);
```

```css
inset 0.3em 0.3em 0.6em rgba(256,256,256,0.5), inset -0.3em -0.3em 0.6em rgba(0,0,0,0.5);
```

--------------------------------

### Setup 2D and WebGL Canvas Contexts

Source: https://github.com/yorickshan/html2canvas-pro/blob/main/tests/reftests/images/canvas.html

Initializes 2D and WebGL contexts for HTML canvas elements. Use this to prepare canvases for drawing operations.

```javascript
function setUp() {
  var ctx = document.querySelector('#testcanvas').getContext('2d');
  ctx.fillStyle = "rgb(200,0,0)";
  ctx.fillRect (10, 10, 55, 50);
  ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
  ctx.fillRect (30, 30, 55, 50);

  var gl = document.querySelector('#webglcanvas').getContext('webgl', {preserveDrawingBuffer: true});
  if (gl) {
    gl.clearColor(0.0, 1.0, 0.0, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);
  }
}
```

--------------------------------

### CSS for z-index Example

Source: https://github.com/yorickshan/html2canvas-pro/blob/main/tests/reftests/zindex/z-index20.html

Defines styles for a container and two absolutely positioned child elements, controlling their layout and stacking order with z-index.

```css
.container {
  width: 375px;
  height: 603px;
  background-color: #999;
  position: relative;
  margin-bottom: 30px;
}

.child1 {
  height: 500px;
  width: 200px;
  background-color: red;
  z-index: 20;
  position: absolute;
  left: 0;
  top: 0;
}

.child2 {
  height: 50px;
  width: 100px;
  background-color: blue;
  z-index: 20;
  position: absolute;
  left: 30px;
  top: 30px;
}
```

--------------------------------

### Setup Function for Underline Tests

Source: https://github.com/yorickshan/html2canvas-pro/blob/main/tests/reftests/text/underline.html

Initializes the test environment by creating DOM elements with various font families and text sizes. This function is called before running the tests.

```javascript
function setUp() { var container = document.querySelector('#test'); container.innerHTML = ''; 
['arial','verdana','courier new'].forEach(function(e) { var div = document.createElement('div'); div.style.fontFamily = e; container.appendChild(div); 
for(var i=1;i<=10;i*=2) { var text = document.createElement('div'); text.innerText = 'Testing texts'; text.style.marginTop = '1px'; text.style.fontSize = (16+i*6) + 'px'; div.appendChild(text); } }); }
```

--------------------------------

### Basic CSS Rotation Examples

Source: https://github.com/yorickshan/html2canvas-pro/blob/main/tests/reftests/rotate/css-rotate-property.html

Demonstrates basic clockwise and counter-clockwise rotation using the 'rotate' property. Apply these classes to elements to see the effect.

```css
.rotate-45 {
  rotate: 45deg;
}
```

```css
.rotate--45 {
  rotate: -45deg;
}
```

```css
.rotate-90 {
  rotate: 90deg;
}
```

```css
.rotate-180 {
  rotate: 180deg;
}
```

--------------------------------

### Basic CSS Styling

Source: https://github.com/yorickshan/html2canvas-pro/blob/main/tests/reftests/animation.html

Provides basic styling for the page body and paragraph elements. This sets up the visual foundation for the animation examples.

```css
body {
  font-family: Arial;
}
```

```css
p {
  font: 22px/1 Arial, sans-serif;
  position: absolute;
  top: 25%;
  left: 25%;
  width: 50%;
  height: 50%;
  color: #fff;
  background-color: #666;
  line-height: 90px;
  text-align: center;
}
```

--------------------------------

### Layout and Styling for Animation Examples

Source: https://github.com/yorickshan/html2canvas-pro/blob/main/tests/reftests/animation.html

Styles container divs for layout and visual appearance. These elements are used to hold and display the animated content.

```css
div {
  float: left;
  clear: left;
  margin-right: 10px;
  background-color: #ccc;
  width: 180px;
  height: 180px;
  position: relative;
}
```

--------------------------------

### Picture Setup and Styling

Source: https://github.com/yorickshan/html2canvas-pro/blob/main/tests/reftests/acid2.html

Defines styles for the main picture area, including margins, text alignment, font, and color. It also sets up the 'picture' class for positioning and borders.

```css
#top {
  margin: 100em 3em 0;
  padding: 2em 0 0 .5em;
  text-align: left;
  font: 2em/24px sans-serif;
  color: navy;
  white-space: pre;
}
.picture {
  position: relative;
  border: 1em solid transparent;
  margin: 0 0 100em 3em;
}
.picture {
  background: red;
}
```

--------------------------------

### Complete Example with Multiple Options

Source: https://github.com/yorickshan/html2canvas-pro/blob/main/docs/configuration.md

Use this snippet to capture an element with custom scale, CORS handling, background color, logging, timeouts, element exclusion, and on-clone modifications. The result is appended to the body or can be converted to a data URL.

```typescript
html2canvas(document.getElementById('capture'), {
    scale: 2, // 2x scale for higher resolution
    useCORS: true,
    backgroundColor: '#f5f5f5',
    logging: false,
    imageTimeout: 30000,
    ignoreElements: (element) => {
        return element.classList.contains('do-not-capture');
    },
    onclone: (clonedDoc) => {
        // Modify the cloned document before rendering
        const timestamp = clonedDoc.getElementById('timestamp');
        if (timestamp) {
            timestamp.textContent = new Date().toLocaleString();
        }
    }
}).then(canvas => {
    // Use the resulting canvas
    document.body.appendChild(canvas);
    
    // Or convert to image
    const image = canvas.toDataURL('image/png');
    // Do something with the image...
});
```

--------------------------------

### HTML Structure for z-index Example

Source: https://github.com/yorickshan/html2canvas-pro/blob/main/tests/reftests/zindex/z-index12.html

Basic HTML structure with nested divs to demonstrate z-index behavior. Ensure elements have 'position' set to something other than 'static' for z-index to apply.

```html
<div id="div1">\n  <div id="div2"></div>\n  <div id="div3"></div>\n</div>
```

--------------------------------

### Complex Multi-Layered Radial Gradients (Webkit)

Source: https://github.com/yorickshan/html2canvas-pro/blob/main/tests/reftests/background/radial-gradient.html

Demonstrates a complex background using multiple layered radial gradients with transparency. This example is specific to Webkit browsers.

```css
background-image: -webkit-gradient(radial, 45 45, 10, 52 50, 30, from(#A7D30C), to(rgba(1,159,98,0)), color-stop(90%, #019F62)), -webkit-gradient(radial, 105 105, 20, 112 120, 50, from(#ff5f98), to(rgba(255,1,136,0)), color-stop(75%, #ff0188)), -webkit-gradient(radial, 95 15, 15, 102 20, 40, from(#00c9ff), to(rgba(0,201,255,0)), color-stop(80%, #00b5e2)), -webkit-gradient(radial, 0 150, 50, 0 140, 90, from(#f4f201), to(rgba(228, 199,0,0)), color-stop(80%, #e4c700));
```

--------------------------------

### Another Relative Positioning Example

Source: https://github.com/yorickshan/html2canvas-pro/blob/main/tests/reftests/zindex/z-index9.html

Illustrates a second relatively positioned element with a lower z-index (2). This element will be stacked below the previous relative div.

```css
#reldiv2 {
  z-index: 2;
  position: relative;
  height: 100px;
  top: 15px;
  left: 20px;
  border: 1px solid #669966;
  background-color: #ccffcc;
  margin: 0px 50px 0px 50px;
  text-align: center;
}
```

--------------------------------

### Complex Multi-Layered Radial Gradients (Moz)

Source: https://github.com/yorickshan/html2canvas-pro/blob/main/tests/reftests/background/radial-gradient.html

Demonstrates a complex background using multiple layered radial gradients with transparency. This example is specific to Mozilla browsers.

```css
background-image: -moz-radial-gradient(42px 42px, circle farthest-corner, #A7D30C 0%, #A7D30C 3%, rgba(1,159,98,0) 11%), -moz-radial-gradient(45px 45px, circle farthest-corner, #019F62 0%, #019F62 13%, rgba(255,255,255,0) 16%, rgba(255,255,255,0) 100%), -moz-radial-gradient(102px 102px, circle farthest-corner, #ff5f98 0%, #ff5f98 15%, rgba(255,1,136,0) 27%), -moz-radial-gradient(105px 105px, circle farthest-corner, #FF0188 0%, #FF0188 28%, rgba(255,255,255,0) 32%, rgba(255,255,255,0) 100%), -moz-radial-gradient(92px 12px, circle farthest-corner, #00c9ff 0%, #00c9ff 10%, rgba(0,181,226,0) 26%), -moz-radial-gradient(95px 15px, circle farthest-corner, #00b5e2 0%, #00b5e2 28%, rgba(255,255,255,0) 31%, rgba(255,255,255,0) 100%), -moz-radial-gradient(0px 150px, circle farthest-corner, #f4f201 0%, #f4f201 25%, rgba(228,199,0,0) 45%), -moz-radial-gradient(0px 150px, circle farthest-corner, #e4c700 0%, #e4c700 47%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 100%);
```

--------------------------------

### Setup Function for Line-Through Tests

Source: https://github.com/yorickshan/html2canvas-pro/blob/main/tests/reftests/text/linethrough.html

This JavaScript function sets up the test environment by clearing the body and appending divs with different font families and text sizes, each styled with a line-through decoration. It's used to prepare content for HTML2Canvas rendering tests.

```javascript
function setUp() {
  $('body').empty();
  $.each(['arial','verdana','courier new'],function(i,e){
    var div = $('<div />').css('font-family',e).appendTo('body');
    for(var i=0;i<=5;i++){
      $('<div />').text('Testing texts').css('margin-top',1).css('border','1px solid black').css('font-size',(16+i*6)).appendTo(div);
    }
  });
}
```

--------------------------------

### Second Absolute Positioning Example

Source: https://github.com/yorickshan/html2canvas-pro/blob/main/tests/reftests/zindex/z-index9.html

Displays another absolutely positioned element with a z-index of 1. This element will be at the bottom of the stacking context among positioned elements.

```css
#absdiv2 {
  z-index: 1;
  position: absolute;
  width: 150px;
  height: 350px;
  top: 10px;
  right: 10px;
  border: 1px solid #990000;
  background-color: #ffdddd;
  text-align: center;
}
```

--------------------------------

### Inset Frame Clipping

Source: https://github.com/yorickshan/html2canvas-pro/blob/main/docs/features.md

Create an inset frame effect on a div element using the inset clip-path function. This example applies a 10% inset from all sides.

```html
<!-- Inset frame -->
<div style="clip-path: inset(10%);">
  content
</div>
```

--------------------------------

### Custom isSameOrigin: Handle redirect images

Source: https://github.com/yorickshan/html2canvas-pro/blob/main/tests/reftests/options/custom-is-same-origin.html

This example demonstrates using customIsSameOrigin to specifically handle redirect images. It checks if the source URL includes '/redirect-image' and returns false for it, while using the default check for other sources. This ensures proper CORS handling for redirected resources.

```javascript
const h2cTests = [
  {
    name: 'With customIsSameOrigin for handling redirect',
    options: {
      useCORS: true,
      logging: true,
      customIsSameOrigin: (src, oldFn) => {
        // Mark the redirect-image as not same origin
        if (src.includes('/redirect-image')) {
          return false;
        }
        return oldFn(src);
      }
    }
  }
];
```

--------------------------------

### Test 2: Scale Parent with Center Origin

Source: https://github.com/yorickshan/html2canvas-pro/blob/main/tests/reftests/transform/scale-containing-block.html

This example demonstrates `transform: scale(0.75)` with `transform-origin: center center`. The child element's dimensions are calculated relative to the scaled parent, with positioning adjusted by `left` and `top` percentages.

```css
.scale-center {
  background-color: #343;
  transform: scale(0.75);
  transform-origin: center center;
  width: 300px;
  height: 150px;
  margin-top: 40px;
}

.scale-center .child-centered {
  width: 50%; /* 150px of parent */
  height: 60%; /* 90px of parent */
  background-color: #88cc88;
  position: absolute;
  left: 25%;
  top: 20%;
}
```

--------------------------------

### Circle Cover Radial Gradient (Top-Left Position)

Source: https://github.com/yorickshan/html2canvas-pro/blob/main/tests/reftests/background/radial-gradient.html

Defines a circle-shaped radial gradient starting from the top-left corner.

```css
.radialGradient11 { background: -moz-radial-gradient(left top, circle cover, #ababab, #0000ff 33%,#991f1f 100%); background: -webkit-radial-gradient(left top, circle cover, #ababab, #0000ff 33%,#991f1f 100%); background: -o-radial-gradient(left top, circle cover, #ababab, #0000ff 33%,#991f1f 100%); background: -ms-radial-gradient(left top, circle cover, #ababab, #0000ff 33%,#991f1f 100%); background: radial-gradient(left top, circle cover, #ababab, #0000ff 33%,#991f1f 100%); }
```

--------------------------------

### Basic HTML Structure and Styling

Source: https://github.com/yorickshan/html2canvas-pro/blob/main/tests/reftests/acid2.html

Sets up the base HTML and CSS for the test, including font, margin, padding, and background properties. It also defines styles for the introduction message.

```css
html {
  font: 12px sans-serif;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: white;
  color: red;
}
body {
  margin: 0;
  padding: 0;
}
.intro {
  font: 2em sans-serif;
  margin: 3.5em 2em;
  padding: 0.5em;
  border: solid thin;
  background: white;
  color: black;
  position: relative;
  z-index: 2;
}
.intro * {
  font: inherit;
  margin: 0;
  padding: 0;
}
.intro h1 {
  font-size: 1em;
  font-weight: bolder;
  margin: 0;
  padding: 0;
}
.intro :link {
  color: blue;
}
.intro :visited {
  color: purple;
}
```

--------------------------------

### Create 8x8 Pixel Art

Source: https://github.com/yorickshan/html2canvas-pro/blob/main/demo/image-smoothing-demo.html

Generates an 8x8 pixel art on a canvas element. This serves as the source for upscaling examples.

```javascript
function createPixelArt() {
  const canvas = document.getElementById('small-pixel-art');
  const ctx = canvas.getContext('2d');
  const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff', '#ffffff', '#000000'];
  for (let y = 0; y < 8; y++) {
    for (let x = 0; x < 8; x++) {
      ctx.fillStyle = colors[(x + y) % colors.length];
      ctx.fillRect(x, y, 1, 1);
    }
  }
}
createPixelArt();
```

--------------------------------

### Dynamically load html2canvas-pro and initialize demo

Source: https://github.com/yorickshan/html2canvas-pro/blob/main/docs/getting-started.md

This script dynamically loads the html2canvas-pro library from a CDN and then calls an initialization function once the script is loaded. This is useful for integrating the library into existing HTML pages without a build process.

```javascript
import { onMounted } from 'vue'

onMounted(() => {
  // Dynamically load html2canvas-pro
  const script = document.createElement('script')
  script.src = 'https://cdn.jsdelivr.net/npm/html2canvas-pro/dist/html2canvas-pro.min.js'
  script.onload = initDemo
  document.head.appendChild(script)
})

function initDemo() {
  let currentCanvas = null
}
```

--------------------------------

### CSS Animation Playback Control

Source: https://github.com/yorickshan/html2canvas-pro/blob/main/tests/reftests/animation.html

Applies a CSS animation and sets its playback state to paused. Use this to control when animations start or stop.

```css
.animated.working p {
  animation-name: rotate0;
  animation-duration: 1ms, 1ms;
  animation-play-state: paused;
}
```

--------------------------------

### Ignore elements with class 'no-capture'

Source: https://github.com/yorickshan/html2canvas-pro/blob/main/docs/configuration.md

Use the `ignoreElements` predicate function to exclude specific elements from rendering. This example removes elements that have the class 'no-capture'.

```javascript
ignoreElements: (el) => el.classList.contains('no-capture')
```

--------------------------------

### Ignore Elements with a Predicate Function

Source: https://github.com/yorickshan/html2canvas-pro/blob/main/tests/reftests/options/ignore.html

Use the `ignoreElements` option with a function to conditionally exclude elements. This example ignores elements with the class name 'ignored'.

```javascript
h2cOptions = {ignoreElements: function(element) { return element.className === 'ignored'; }};
```

--------------------------------

### Linear Gradient with Multiple Vendor Prefixes

Source: https://github.com/yorickshan/html2canvas-pro/blob/main/tests/reftests/background/linear-gradient.html

Demonstrates a linear gradient with color stops and vendor prefixes for Chrome, Safari, Opera, IE, and Mozilla. Uses W3C standard syntax.

```css
.linearGradient3 {
  background: -moz-linear-gradient(left, #ff0000, #ffff00, #00ff00);
  background: -webkit-gradient(linear, left top, right top, color-stop(#ff0000), color-stop(#ffff00), color-stop(#00ff00));
  background: -webkit-linear-gradient(left, #ff0000, #ffff00, #00ff00);
  background: -o-linear-gradient(left, #ff0000, #ffff00, #00ff00);
  background: -ms-linear-gradient(left, #ff0000, #ffff00, #00ff00);
  background: linear-gradient(left, #ff0000, #ffff00, #00ff00);
}
```

--------------------------------

### Import html2canvas-pro

Source: https://github.com/yorickshan/html2canvas-pro/blob/main/README.md

Import the html2canvas-pro library into your JavaScript project.

```javascript
import html2canvas from 'html2canvas-pro';
```

--------------------------------

### z-index: 1 Behavior

Source: https://github.com/yorickshan/html2canvas-pro/blob/main/tests/reftests/zindex/z-index6.html

Demonstrates the stacking order when one element has a z-index of 1, while another has a default or lower z-index.

```html
<body>
  <div class="z0">z-index:0</div>
  <div class="z1">z-index:1</div>
</body>
```

--------------------------------

### Ignoring Elements by Class Name

Source: https://github.com/yorickshan/html2canvas-pro/blob/main/tests/reftests/options/ignore-2.html

Use the ignoreElements option with a function to exclude elements based on their class name. This example ignores any element with the class 'ignored'.

```javascript
var h2cOptions = {ignoreElements: function(element) { return element.className === 'ignored'; }};
```

--------------------------------

### Ellipse Crop Clipping

Source: https://github.com/yorickshan/html2canvas-pro/blob/main/docs/features.md

Crop a div element into an ellipse shape using the ellipse clip-path function. This example specifies the horizontal and vertical radii and the center point.

```html
<!-- Ellipse crop -->
<div style="clip-path: ellipse(60% 40% at 50% 50%);">
  content
</div>
```

--------------------------------

### High-Quality Photo Export with Download

Source: https://github.com/yorickshan/html2canvas-pro/blob/main/docs/features.md

Capture a photo element with maximum quality using `imageSmoothing: true` and `imageSmoothingQuality: 'high'`. The captured canvas is then converted to a PNG and prepared for download.

```javascript
// Professional photo capture with maximum quality
const photoElement = document.querySelector('.photo-frame');
const canvas = await html2canvas(photoElement, {
    imageSmoothing: true,
    imageSmoothingQuality: 'high',
    scale: 2,
    backgroundColor: '#ffffff'
});

// Download as high-quality PNG
const link = document.createElement('a');
link.download = 'photo-export.png';
link.href = canvas.toDataURL('image/png');
link.click();
```

--------------------------------

### Adjusting Window Size for Large Canvases

Source: https://github.com/yorickshan/html2canvas-pro/blob/main/docs/faq.md

Shows how to use 'windowWidth' and 'windowHeight' options to set a custom window size based on the element's scroll dimensions, helping to avoid browser limitations for large canvases.

```javascript
import html2canvas from 'html2canvas-pro';

await html2canvas(element, {
    windowWidth: element.scrollWidth,
    windowHeight: element.scrollHeight
});
```

--------------------------------

### Export Crisp UI Icons at Scale

Source: https://github.com/yorickshan/html2canvas-pro/blob/main/docs/features.md

Export crisp UI icons at a higher scale for retina displays without blur. `imageSmoothing: false` ensures sharp edges, and `backgroundColor: null` maintains transparency.

```javascript
// Export crisp 16x16 icons at 4x scale for retina displays
const iconElement = document.querySelector('.icon-16');
const exportedIcon = await html2canvas(iconElement, {
    imageSmoothing: false,
    scale: 4,
    backgroundColor: null  // Transparent background
});
```

--------------------------------

### Default z-index Behavior

Source: https://github.com/yorickshan/html2canvas-pro/blob/main/tests/reftests/zindex/z-index6.html

Illustrates the default stacking order when no explicit z-index is set on a relatively positioned element.

```html
<body>
  <div class="z0">z-index:0</div>
  <div>default z-index</div>
</body>
```

--------------------------------

### Radial Gradient at 0% 0% with Explicit Size

Source: https://github.com/yorickshan/html2canvas-pro/blob/main/tests/reftests/background/radial-gradient-explicit-size.html

Defines a radial gradient starting from the top-left corner (0% 0%) with explicit size parameters. This is a test case from Issue #178.

```css
.test1 { background: radial-gradient(0% 0% at 0% 0%, #235CFC 0%, #1EA3FF 100%); }
```

--------------------------------

### CSS for Line-Through Decoration

Source: https://github.com/yorickshan/html2canvas-pro/blob/main/tests/reftests/text/linethrough.html

This CSS rule applies the line-through text decoration to all div elements. It's a fundamental part of the test setup to ensure the decoration is present on the content being rendered.

```css
div{ text-decoration:line-through; }
```

--------------------------------

### Set imageSmoothingQuality to 'high'

Source: https://github.com/yorickshan/html2canvas-pro/blob/main/docs/configuration.md

Configure the quality level for image smoothing when `imageSmoothing` is enabled. Options include 'low', 'medium', or 'high'. Higher quality may impact performance for large images.

```javascript
imageSmoothingQuality: 'high'
```

--------------------------------

### CSS for Text Size Variants

Source: https://github.com/yorickshan/html2canvas-pro/blob/main/tests/reftests/text/linethrough.html

These CSS classes define different font sizes for text elements. They are used in conjunction with the setup function to test how line-through decoration is rendered at various text scales.

```css
.small{ font-size:14px; }
.medium{ font-size:18px; }
.large{ font-size:24px; }
```

--------------------------------

### Comparison with transform: rotate()

Source: https://github.com/yorickshan/html2canvas-pro/blob/main/tests/reftests/rotate/css-rotate-property.html

Provides a direct comparison between the modern 'rotate' property and the older 'transform: rotate()' syntax for applying rotation.

```css
.transform-rotate {
  transform: rotate(45deg);
}
```

--------------------------------

### Linear Gradient with Percentage Color Stops

Source: https://github.com/yorickshan/html2canvas-pro/blob/main/tests/reftests/background/linear-gradient.html

Creates a linear gradient transitioning from white at 0% to black at 100%.

```css
.linearGradient13 { background: linear-gradient(to top left, white 0%, black 100%); }
```

--------------------------------

### Capturing a Scrolled Area with HTML2Canvas

Source: https://github.com/yorickshan/html2canvas-pro/blob/main/tests/reftests/options/scroll.html

Use the scrollX and scrollY options to specify the starting point of the captured area within a larger scrollable document or element. This is useful for capturing content that is not immediately visible in the viewport.

```javascript
var h2cOptions = { x: 250, y: 250, width: 200, height: 100, scrollX: 250, scrollY: 250 };
```

--------------------------------

### Radial Gradient with Pixel and Percentage Explicit Sizes

Source: https://github.com/yorickshan/html2canvas-pro/blob/main/tests/reftests/background/radial-gradient-explicit-size.html

Demonstrates a radial gradient using a mix of pixel (50px width) and percentage (100px height) for its explicit size, positioned at 50px 50px.

```css
.test5 { background: radial-gradient(50px 100px at 50px 50px, #235CFC 0%, #1EA3FF 100%); }
```

--------------------------------

### Modify cloned document content with onclone callback

Source: https://github.com/yorickshan/html2canvas-pro/blob/main/docs/configuration.md

Use the `onclone` callback function to modify the document content after it has been cloned for rendering, without affecting the original source. This example updates the text content of an element with the current ISO timestamp.

```javascript
onclone: (doc) => doc.querySelector('.date').textContent = new Date().toISOString()
```

--------------------------------

### Basic Box Styling with Solid Border and Radius

Source: https://github.com/yorickshan/html2canvas-pro/blob/main/tests/reftests/border/radius.html

Defines a base style for boxes with a solid border and a uniform border-radius. This is used as a foundation for further styling.

```css
.box { width: 200px; height: 200px; display: inline-block; margin: 10px; background:#6F428C; border-style: solid; border-radius: 50px; }
```

--------------------------------

### CSS word-break: normal

Source: https://github.com/yorickshan/html2canvas-pro/blob/main/tests/reftests/text/word-break.html

Illustrates the default behavior of word wrapping. Use when standard line breaking is desired.

```css
.normal {
  word-break: normal;
}
```

--------------------------------

### Linear Gradient with Angle Units (Radians)

Source: https://github.com/yorickshan/html2canvas-pro/blob/main/tests/reftests/background/linear-gradient.html

Illustrates a linear gradient using an angle defined in radians.

```css
.linearGradient16 { background: linear-gradient(-375.5rad, yellow, orange, red 60%, blue); }
```

--------------------------------

### Custom isSameOrigin: Async check for redirect images

Source: https://github.com/yorickshan/html2canvas-pro/blob/main/tests/reftests/options/custom-is-same-origin.html

This snippet illustrates an asynchronous customIsSameOrigin check. It introduces a delay using `await sleep(50)` before returning false for redirect images, simulating a more complex, non-blocking origin verification process. This is useful for scenarios where origin checks might involve network requests or other asynchronous operations.

```javascript
const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms));
const h2cTests = [
  {
    name: 'With async customIsSameOrigin check',
    options: {
      useCORS: true,
      logging: true,
      customIsSameOrigin: async (src, oldFn) => {
        if (src.includes('/redirect-image')) {
          // Wait briefly to simulate async check
          await sleep(50);
          return false;
        }
        return oldFn(src);
      }
    }
  }
];
```

--------------------------------

### Set proxy for cross-origin images

Source: https://github.com/yorickshan/html2canvas-pro/blob/main/docs/configuration.md

Specify a proxy URL for loading cross-origin images. If this option is left empty, cross-origin images will not be loaded.

```javascript
proxy: "https://proxy.example.com/"
```

--------------------------------

### Diagonal Linear Gradient (Top Left to Bottom Right)

Source: https://github.com/yorickshan/html2canvas-pro/blob/main/tests/reftests/background/linear-gradient.html

Creates a linear gradient from the top left to the bottom right with multiple color stops. Uses standard W3C syntax.

```css
.linearGradient10 {
  background: linear-gradient(to left top, #0000Ff, rgb(255, 0,0) 50px, green 199px, rgba(0, 0, 0, 0.5) 100.0%);
}
```

--------------------------------

### Diagonal Linear Gradient (Bottom Left to Top Right)

Source: https://github.com/yorickshan/html2canvas-pro/blob/main/tests/reftests/background/linear-gradient.html

Creates a linear gradient from the bottom left to the top right. Uses standard W3C syntax.

```css
.linearGradient8 {
  background: linear-gradient(to bottom left, #fff 0%, #00263c 100%);
}
```

--------------------------------

### Smart Capture Based on Content Type

Source: https://github.com/yorickshan/html2canvas-pro/blob/main/docs/features.md

Implement a function to automatically select image smoothing and scaling options based on the content type. This allows for optimized capture of different elements like pixel art, photos, or documents.

```javascript
// Automatically choose smoothing based on content type
async function smartCapture(element, contentType) {
    const options = {
        pixelArt: {
            imageSmoothing: false,
            scale: 2
        },
        photo: {
            imageSmoothing: true,
            imageSmoothingQuality: 'high',
            scale: 1
        },
        document: {
            imageSmoothing: true,
            imageSmoothingQuality: 'medium',
            scale: 2
        }
    };
    
    return await html2canvas(element, options[contentType]);
}

// Usage
await smartCapture(gameElement, 'pixelArt');
await smartCapture(photoGallery, 'photo');
```

--------------------------------

### Text Decoration Styles

Source: https://github.com/yorickshan/html2canvas-pro/blob/main/tests/reftests/text/text.html

Demonstrates various text-decoration properties like none, underline, overline, and line-through. These styles are tested across different font families.

```CSS
body {
  font-family: Arial;
}

.small {
  font-size: 14px;
  line-height: 1vw;
}

.medium {
  font-size: 18px;
  line-height: 2vw;
}

.large {
  font-size: 24px;
  line-height: 3vw;
}

div {
  float: left;
}

h2 {
  clear: both;
}

h1 {
  font-size: 36px;
  line-height: 4vw;
}

h2 {
  font-size: 24px;
  line-height: 3vw;
}

h3 {
  font-size: 16px;
  line-height: 2vw;
}

.raw {
  font-size: 60px;
  word-spacing: 30px;
}
```

```CSS
1. text-decoration:none;
2. text-decoration:underline;
3. text-decoration:overline;
4. text-decoration:line-through;
```

```CSS
1. text-decoration:none;
2. text-decoration:underline;
3. text-decoration:overline;
4. text-decoration:line-through;
```

```CSS
1. text-decoration:none;
2. text-decoration:underline;
3. text-decoration:overline;
4. text-decoration:line-through;
```

```CSS
1. text-decoration:none;
2. text-decoration:underline;
3. text-decoration:overline;
4. text-decoration:line-through;
```

```CSS
1. text-decoration:none;
2. text-decoration:underline;
3. text-decoration:overline;
4. text-decoration:line-through;
```

```CSS
1. text-decoration:none;
2. text-decoration:underline;
3. text-decoration:overline;
4. text-decoration:line-through;
```

```CSS
1. text-decoration:none;
2. text-decoration:underline;
3. text-decoration:overline;
4. text-decoration:line-through;
```

```CSS
1. text-decoration:none;
2. text-decoration:underline;
3. text-decoration:overline;
4. text-decoration:line-through;
```

```CSS
1. text-decoration:none;
2. text-decoration:underline;
3. text-decoration:overline;
4. text-decoration:line-through;
```

--------------------------------

### Interactive Screenshot Capture and Download

Source: https://github.com/yorickshan/html2canvas-pro/blob/main/docs/getting-started.md

This JavaScript code demonstrates how to capture an HTML element as a canvas and then download it as a PNG image. It includes status updates and error handling. Ensure you have the html2canvas library included in your project.

```javascript
const captureBtn = document.getElementById('captureBtn')
const downloadBtn = document.getElementById('downloadBtn')
const statusDiv = document.getElementById('status')
const resultDiv = document.getElementById('result')

function showStatus(message, type = 'success') {
  statusDiv.innerHTML = `<div class="status-message ${type}">${message}</div>`
  if (type === 'success') {
    setTimeout(() => {
      statusDiv.innerHTML = ''
    }, 3000)
  }
}

function showLoading() {
  statusDiv.innerHTML = '<div class="status-message loading"><span>⏳</span><span>Generating screenshot...</span></div>'
}

async function captureElement() {
  try {
    captureBtn.disabled = true
    showLoading()
    resultDiv.innerHTML = ''

    const element = document.getElementById('capture')
    const canvas = await html2canvas(element, {
      backgroundColor: null,
      scale: 2
    })

    currentCanvas = canvas
    resultDiv.innerHTML = '<h4>✅ Screenshot Result:</h4>'
    resultDiv.appendChild(canvas)
    
    downloadBtn.disabled = false
    showStatus('✅ Screenshot successful! You can click "Download Image" button to save.', 'success')
  } catch (error) {
    console.error('Capture failed:', error)
    showStatus('❌ Capture failed: ' + error.message, 'error')
  } finally {
    captureBtn.disabled = false
  }
}

function downloadImage() {
  if (!currentCanvas) {
    showStatus('❌ Please capture first', 'error')
    return
  }

  const link = document.createElement('a')
  link.download = `screenshot-${Date.now()}.png`
  link.href = currentCanvas.toDataURL('image/png')
  link.click()
  
  showStatus('✅ Image downloaded!', 'success')
}

captureBtn.addEventListener('click', captureElement)
downloadBtn.addEventListener('click', downloadImage)
}
```

--------------------------------

### CSSStyleSheet API

Source: https://github.com/yorickshan/html2canvas-pro/blob/main/tests/reftests/webcomponents/webcomponents.html

Demonstrates the use of the CSSStyleSheet API to create and replace styles. This is useful for dynamically applying styles to web components.

```javascript
const sheet = new CSSStyleSheet(); sheet.replaceSync('\* { color: red !important; }')
```

--------------------------------

### Setting Crop Options

Source: https://github.com/yorickshan/html2canvas-pro/blob/main/tests/reftests/options/crop.html

Define the crop options object to specify the region to capture. The CSS for the target element is also shown.

```html
h2cOptions = { x: 250, y: 250, width: 100, height: 100 };
#div1 {
  position: absolute;
  left: 250px;
  top: 250px;
  width: 100px;
  height: 100px;
  background: green;
}
body, html {
  background: red;
}
```

--------------------------------

### Set window width for rendering

Source: https://github.com/yorickshan/html2canvas-pro/blob/main/docs/configuration.md

Define the window width to use during rendering with the `windowWidth` option. This can influence rendering behavior, such as media queries.

```javascript
windowWidth: 1920
```

--------------------------------

### Apply Image Rendering CSS for Photos

Source: https://github.com/yorickshan/html2canvas-pro/blob/main/docs/features.md

Use the CSS `image-rendering` property with `smooth` to enable high-quality smoothing for photographic images.

```html
<img src="photo.jpg" style="image-rendering: smooth;" />
```

--------------------------------

### Container Styling with Background Properties

Source: https://github.com/yorickshan/html2canvas-pro/blob/main/tests/reftests/background/size.html

Styles a container element with a background image, size, repeat, and position.

```css
.container {
  float: left;
  border: 1px solid black;
  width: 150px;
  height: 200px;
  background-image: url(../../assets/image.jpg);
  background-size: 34px;
  background-repeat: no-repeat;
  background-position: center;
}
```

--------------------------------

### Enable High-Quality Image Smoothing

Source: https://github.com/yorickshan/html2canvas-pro/blob/main/docs/features.md

Enable high-quality smoothing for photographic content by setting `imageSmoothing` to `true` and specifying `imageSmoothingQuality`.

```javascript
// High quality smoothing for photos
html2canvas(element, {
    imageSmoothing: true,
    imageSmoothingQuality: 'high'  // 'low' | 'medium' | 'high'
});
```

--------------------------------

### Basic CSS for Z-index Test

Source: https://github.com/yorickshan/html2canvas-pro/blob/main/tests/reftests/zindex/z-index1.html

Defines base styles for elements used in z-index testing, including font, bold text, and styles for relatively positioned divs.

```css
div {
  font: 12px Arial;
}
span.bold {
  font-weight: bold;
}
#div1,#div3 {
  height: 80px;
  position: relative;
  border: 1px solid #669966;
  background-color: #ccffcc;
  padding-left: 5px;
}
```

--------------------------------

### Set window height for rendering

Source: https://github.com/yorickshan/html2canvas-pro/blob/main/docs/configuration.md

Define the window height to use during rendering with the `windowHeight` option. This can influence rendering behavior, such as media queries.

```javascript
windowHeight: 1080
```

--------------------------------

### Box Styling with Varying Border Widths and Colors

Source: https://github.com/yorickshan/html2canvas-pro/blob/main/tests/reftests/border/radius.html

Applies different border widths and specific side colors to a base box style. This demonstrates how border-width and individual border colors interact with the box.

```css
.box1 { border-width: 1px; border-left-color: #00b5e2; border-top-color: red; border-right-color: green; }
```

```css
.box2 { border-width: 3px; border-left-color: #00b5e2; border-top-color: red; border-right-color: green; }
```

```css
.box3 { border-width: 10px; border-left-color: transparent; border-top-color: red; border-right-color: green; }
```

--------------------------------

### White Text with Blue Shadow and Font Styling

Source: https://github.com/yorickshan/html2canvas-pro/blob/main/tests/reftests/text/shadow.html

Styles text with white color, blue shadows, and specific font properties.

```css
.white-text-with-blue-shadow {
  text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
  color: white;
  font: 1.5em Georgia, serif;
}
```

--------------------------------

### Basic Element Styling

Source: https://github.com/yorickshan/html2canvas-pro/blob/main/tests/reftests/zindex/z-index9.html

Provides base styling for div and span elements, including opacity, font, and bold text.

```css
div {
  opacity: 0.7;
  font: 12px Arial;
}
span.bold {
  font-weight: bold;
}
```

--------------------------------

### Execute html2canvas tests with custom options

Source: https://github.com/yorickshan/html2canvas-pro/blob/main/tests/reftests/options/custom-is-same-origin.html

This code executes a series of html2canvas tests, each with different customIsSameOrigin configurations. It iterates through predefined test cases, captures the HTML content as a canvas, and appends the result to the DOM. Includes a delay between tests to ensure proper rendering and observation.

```javascript
window.dontRun = true;
const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms));
const h2cTests = [
  {
    name: 'With customIsSameOrigin forcing all to not be same origin',
    options: {
      useCORS: true,
      logging: true,
      customIsSameOrigin: (src, oldFn) => false
    }
  },
  {
    name: 'With customIsSameOrigin for handling redirect',
    options: {
      useCORS: true,
      logging: true,
      customIsSameOrigin: (src, oldFn) => {
        // Mark the redirect-image as not same origin
        if (src.includes('/redirect-image')) {
          return false;
        }
        return oldFn(src);
      }
    }
  },
  {
    name: 'With async customIsSameOrigin check',
    options: {
      useCORS: true,
      logging: true,
      customIsSameOrigin: async (src, oldFn) => {
        if (src.includes('/redirect-image')) {
          // Wait briefly to simulate async check
          await sleep(50);
          return false;
        }
        return oldFn(src);
      }
    }
  }
];

// execute tests
async function runTests() {
  const htmlContainer = document.querySelector("main");
  const canvasContainer = document.querySelector('#canvas-container');
  for (const test of h2cTests) {
    await sleep(1000);
    const canvas = await html2canvas(htmlContainer, test.options);
    const resultDiv = document.createElement('div');
    resultDiv.classList.add("flex")
    const p = document.createElement('p');
    p.innerText = test.name;
    resultDiv.appendChild(p);
    resultDiv.appendChild(canvas);
    canvasContainer.appendChild(resultDiv);
  }
}

runTests();
```