- Save image
- Add text to image
- Move text around image
- Style text to meme style
- Custom images
- Multiple text blocks
Download Image
var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
window.location.href=image; // it will save locally
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(new TextEncoder().encode(pathData)).length | |
((new TextEncoder().encode(pathData)).length / 1474560).toFixed(2) | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//checking the time | |
let startTime, endTime, seconds = 0; | |
function startTimer() { | |
startTime = performance.now(); | |
}; | |
function endTimer() { | |
endTime = performance.now(); | |
var timeDiff = endTime - startTime; //in ms |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//Letter.js | |
import React from 'react'; | |
import styled, { keyframes } from "styled-components"; | |
const grow = (fromScale, toScale, fromRotation, toRotation) => keyframes` | |
from { | |
transform: rotate(${fromRotation}deg) scale(${fromScale}); | |
} | |
to { |
PATTERN TILE - USE AT 50% OPACITY FITS WIDTH X4, HEIGHT X4 ON 1920X1080 SCREEN SIZE
BOUNDING BOX AROUND PICTURE & BUTTON - WHITE AT 60% OPACITY SIZE - W- 850, H - 820
BUTTON SIZE- W- 260, H -110
FONT - CHELSEA MARKET TITLE SIZE - 90px
https://caniuse.com/#search=prefers-color-scheme
css vars
- have base vars
- then update them inside the media query
In js Check if the matches result is true
- window.matchMedia('(prefers-color-scheme: dark)')
- else its in light theme
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
let testArray = Array(1000000).fill().map((_, i) => i * i); | |
let testMap = new Map(); | |
testArray.forEach(item => testMap.set(item, item)); | |
const find = () => { | |
console.time('Array find'); | |
testArray.find(val => val == 9604) | |
console.timeEnd('Array find'); | |
}; |