Next Level Watermark Adder
body{
margin:0;
font-family:Segoe UI,Arial;
background:#f6f1e7; /* creamy background */
color:#1f2937
}
.wrapper{
max-width:1200px;
margin:auto;
padding:20px
}
.card{
background:#fffaf0;
border-radius:22px;
padding:20px;
box-shadow:0 25px 60px rgba(0,0,0,.15)
}
h1{text-align:center;margin-bottom:15px}
.controls{
display:flex;
flex-wrap:wrap;
gap:10px;
justify-content:center
}
input,select,button{
padding:10px 14px;
border-radius:10px;
border:1px solid #d1d5db;
outline:none;
background:#fff
}
button{
background:linear-gradient(135deg,#2563eb,#1e40af);
color:#fff;
cursor:pointer;
box-shadow:0 6px 18px rgba(0,0,0,.25)
}
button:hover{transform:translateY(-1px)}
.slider{width:140px}
.canvas-wrap{
margin-top:20px;
position:relative
}
canvas{
width:100%;
border-radius:18px;
background:#fdfdfd;
touch-action:none;
box-shadow:inset 0 0 0 2px #e5e7eb
}
/* 🔥 VISUAL CROP / SELECTION BOX */
.selection-box{
position:absolute;
border:2px solid #2563eb;
background:rgba(37,99,235,.08);
pointer-events:none;
display:none;
box-sizing:border-box
}
.crop-box{
position:absolute;
border:2px dashed #0ea5e9;
background:rgba(14,165,233,.1);
display:none;
pointer-events:none
}
Advanced Watermark Adder Tool
Simple
Bold
Shadow
Transparent
Inverted Stroke
Signature + Tagline
© Copyright
Tiled Watermark
const canvas=document.getElementById("canvas");
const ctx=canvas.getContext("2d");
const cropBox=document.getElementById("cropBox");
const selectBox=document.getElementById("selectBox");
let baseImg=null;
let objects=[];
let active=null;
let dragging=false,ox=0,oy=0;
let cropping=false,cx=0,cy=0;
imgUpload.onchange=e=>{
const img=new Image();
img.onload=()=>{
baseImg=img;
canvas.width=img.width;
canvas.height=img.height;
draw();
};
img.src=URL.createObjectURL(e.target.files[0]);
};
logoUpload.onchange=e=>{
const img=new Image();
img.onload=()=>{
objects.push({
type:"logo",img,
x:120,y:120,w:img.width/3,h:img.height/3,
scale:1,angle:0,flip:1
});
draw();
};
img.src=URL.createObjectURL(e.target.files[0]);
};
function addText(){
objects.push({
type:"text",
text:wmText.value||"Brand",
style:textStyle.value,
x:160,y:160,
scale:1,angle:0,flip:1
});
draw();
}
function draw(){
if(!baseImg)return;
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.drawImage(baseImg,0,0);
objects.forEach(o=>drawObj(o));
drawSelection();
}
function drawObj(o){
ctx.save();
ctx.translate(o.x,o.y);
ctx.rotate(o.angle*Math.PI/180);
ctx.scale(o.scale*o.flip,o.scale);
if(o.type==="logo"){
ctx.drawImage(o.img,0,0,o.w,o.h);
}
if(o.type==="text"){
ctx.font="40px Arial";
ctx.fillStyle="#111";
ctx.strokeStyle="#000";
ctx.lineWidth=3;
ctx.globalAlpha=1;
if(o.style==="bold")ctx.font="bold 44px Arial";
if(o.style==="shadow"){ctx.shadowColor="#000";ctx.shadowBlur=8}
if(o.style==="transparent")ctx.globalAlpha=.3;
if(o.style==="invert"){ctx.strokeText(o.text,0,40)}
if(o.style==="signature"){
ctx.font="italic 42px cursive";
ctx.fillText(o.text,0,40);
ctx.font="16px Arial";
ctx.fillText("your tagline",0,65);
ctx.restore();return;
}
if(o.style==="copyright"){
ctx.fillText("© "+o.text,0,40);
ctx.restore();return;
}
if(o.style==="tile"){
ctx.restore();
for(let y=0;y<canvas.height;y+=120)
for(let x=0;x{
const x=e.offsetX,y=e.offsetY;
active=null;
for(let i=objects.length-1;i>=0;i--){
const o=objects[i];
const w=o.type==="logo"?o.w*o.scale:220;
const h=o.type==="logo"?o.h*o.scale:70;
if(x>o.x&&xo.y&&y{
if(dragging&&active){
active.x=e.offsetX-ox;
active.y=e.offsetY-oy;
draw();
}
if(cropping){
const x=Math.min(cx,e.offsetX);
const y=Math.min(cy,e.offsetY);
cropBox.style.left=x+"px";
cropBox.style.top=y+"px";
cropBox.style.width=Math.abs(e.offsetX-cx)+"px";
cropBox.style.height=Math.abs(e.offsetY-cy)+"px";
}
});
canvas.addEventListener("pointerup",()=>{
dragging=false;
if(cropping)applyCrop();
});
function resizeActive(v){if(active){active.scale=v;draw()}}
function rotateActive(v){if(active){active.angle=v;draw()}}
function flipActive(){if(active){active.flip*=-1;draw()}}
function startCrop(){cropping=true}
function applyCrop(){
cropping=false;
cropBox.style.display="none";
const r=cropBox.getBoundingClientRect();
const c=canvas.getBoundingClientRect();
const x=r.left-c.left,y=r.top-c.top,w=r.width,h=r.height;
const t=document.createElement("canvas");
t.width=w;t.height=h;
t.getContext("2d").drawImage(canvas,x,y,w,h,0,0,w,h);
const img=new Image();
img.onload=()=>{
baseImg=img;
canvas.width=w;canvas.height=h;
objects=[];
active=null;
draw();
};
img.src=t.toDataURL();
}
function downloadImg(){
const a=document.createElement("a");
a.download="watermarked.png";
a.href=canvas.toDataURL("image/png");
a.click();
}
