# Opacity Parameter

**URL:** <https://pdfjs.community/t/opacity-parameter/241>\
**Category:** Bug Reports\
**Tags:** pdfjs-express\
**Created:** [September 7, 2020, 12:52pm UTC](https://pdfjs.community/t/opacity-parameter/241 "2020-09-07T12:52:33Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![tariqwater](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/tariqwater/32/176_2.png) [@tariqwater](https://pdfjs.community/u/tariqwater)\
**Post date:** [September 7, 2020, 12:52pm UTC](https://pdfjs.community/t/opacity-parameter/241/1 "2020-09-07T12:52:33Z")

</div>

HI,

I am not sure if this is a bug.  
But I can’t get transparent annotation by “_stampAnnot.Opacity = 0.5;_” for [Custom Annotation Demo for PDF Viewer](https://pdfjs.express/samples/annotation/custom-annotations) with:

> ```
> WebViewer(
> {
> path: '../../../lib',
> 
> initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/demo-annotated.pdf',
> },
> document.getElementById('viewer')
> ).then(instance => {
> samplesSetup(instance);
> // stamp.js
> const customStampTool = window.createStampTool(instance);
> 
> const TriangleCreateTool = exports.TriangleCreateToolFactory.initialize(instance.Annotations, instance.Tools);
> const TriangleAnnotation = exports.TriangleAnnotationFactory.initialize(instance.Annotations);
> 
> // register the annotation type so that it can be saved to XFDF files
> instance.docViewer.getAnnotationManager().registerAnnotationType(TriangleAnnotation.prototype.elementName, TriangleAnnotation);
> // fxn to check if an annotation is a triangle annotation. allows WebViewer UI to be able to style a selected custom triange annotation
> const isTriangleAnnot = annotation =>
> annotation && annotation[exports.TriangleAnnotationFactory.ANNOT_TYPE] && annotation[exports.TriangleAnnotationFactory.ANNOT_TYPE] === exports.TriangleAnnotationFactory.TRIANGLE_ANNOT_ID;
> const addTriangleTool = () => {
> instance.registerTool(
> {
> toolName: TRIANGLE_TOOL_NAME,
> toolObject: new TriangleCreateTool(instance.docViewer),
> buttonImage:
> '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">' +
> '<path d="M12 7.77L18.39 18H5.61L12 7.77M12 4L2 20h20L12 4z"/>' +
> '<path fill="none" d="M0 0h24v24H0V0z"/>' +
> '</svg>',
> buttonName: 'triangleToolButton',
> tooltip: 'Triangle',
> },
> TriangleAnnotation,
> annotation => isTriangleAnnot(annotation)
> );
> 
> const triangleButton = {
> type: 'toolButton',
> toolName: TRIANGLE_TOOL_NAME,
> };
> 
> instance.setHeaderItems(header => {
> header
> .getHeader('toolbarGroup-Annotate')
> .get('highlightToolGroupButton')
> .insertBefore(triangleButton);
> });
> instance.setToolMode(TRIANGLE_TOOL_NAME);
> };
> 
> const addCustomStampTool = () => {
> // Register tool
> instance.registerTool({
> toolName: 'CustomStampTool',
> toolObject: customStampTool,
> buttonImage: '../../../samples/annotation/custom-annotations/stamp.png',
> buttonName: 'customStampToolButton',
> tooltip: 'Approved Stamp Tool',
> });
> 
> // Add tool button in header
> instance.setHeaderItems(header => {
> header
> .getHeader('toolbarGroup-Annotate')
> .get('highlightToolGroupButton')
> .insertBefore({
> type: 'toolButton',
> toolName: 'CustomStampTool',
> });
> });
> instance.setToolMode('CustomStampTool');
> };
> 
> const removeCustomStampTool = () => {
> instance.unregisterTool('CustomStampTool');
> instance.setToolMode('AnnotationEdit');
> };
> 
> const removeTriangleTool = () => {
> instance.unregisterTool(TRIANGLE_TOOL_NAME);
> instance.setToolMode('AnnotationEdit');
> };
> 
> document.getElementById('custom-stamp').onchange = e => {
> if (e.target.checked) {
> addCustomStampTool();
> } else {
> removeCustomStampTool();
> }
> };
> 
> document.getElementById('custom-triangle-tool').onchange = e => {
> if (e.target.checked) {
> addTriangleTool();
> } else {
> removeTriangleTool();
> }
> };
> 
> instance.iframeWindow.document.body.ondragover = e => {
> e.preventDefault();
> return false;
> };
> 
> let dropPoint = {};
> instance.iframeWindow.document.body.ondrop = e => {
> const scrollElement = instance.docViewer.getScrollViewElement();
> const scrollLeft = scrollElement.scrollLeft || 0;
> const scrollTop = scrollElement.scrollTop || 0;
> dropPoint = { x: e.pageX + scrollLeft, y: e.pageY + scrollTop };
> e.preventDefault();
> return false;
> };
> 
> const addStamp = (imgData, point, rect) => {
> point = point || {};
> rect = rect || {};
> const { Annotations, docViewer, annotManager } = instance;
> const doc = docViewer.getDocument();
> const displayMode = docViewer.getDisplayModeManager().getDisplayMode();
> const page = displayMode.getSelectedPages(point, point);
> if (!!point.x && page.first == null) {
> return; // don't add to an invalid page location
> }
> const pageNumber = page.first !== null ? page.first : docViewer.getCurrentPage();
> const pageInfo = doc.getPageInfo(pageNumber);
> const pagePoint = displayMode.windowToPage(point, pageNumber);
> const zoom = docViewer.getZoom();
> 
> const stampAnnot = new Annotations.StampAnnotation();
> stampAnnot.PageNumber = pageNumber;
> const rotation = docViewer.getCompleteRotation(pageNumber) * 90;
> stampAnnot.Rotation = rotation;
> if (rotation === 270 || rotation === 90) {
> stampAnnot.Width = rect.height / zoom;
> stampAnnot.Height = rect.width / zoom;
> } else {
> stampAnnot.Width = rect.width / zoom;
> stampAnnot.Height = rect.height / zoom;
> }
> stampAnnot.X = (pagePoint.x || pageInfo.width / 2) - stampAnnot.Width / 2;
> stampAnnot.Y = (pagePoint.y || pageInfo.height / 2) - stampAnnot.Height / 2;
> 
> stampAnnot.ImageData = imgData;
> stampAnnot.Opacity = 0.5;
> stampAnnot.Author = annotManager.getCurrentUser();
> 
> annotManager.deselectAllAnnotations();
> annotManager.addAnnotation(stampAnnot);
> annotManager.redrawAnnotation(stampAnnot);
> annotManager.selectAnnotation(stampAnnot);
> };
> 
> // create a stamp image copy for drag and drop
> const sampleImg = document.getElementById('sample-image');
> const div = document.createElement('div');
> const img = document.createElement('img');
> img.id = 'sample-image-copy';
> div.appendChild(img);
> div.style.position = 'absolute';
> div.style.top = '-500px';
> div.style.left = '-500px';
> document.body.appendChild(div);
> const el = sampleImg.firstElementChild;
> img.src = el.src;
> const height = el.height;
> const drawImage = () => {
> const width = (height / img.height) * img.width;
> img.style.width = `${width}px`;
> img.style.height = `${height}px`;
> const c = document.createElement('canvas');
> const ctx = c.getContext('2d');
> c.width = width;
> c.height = height;
> ctx.drawImage(img, 0, 0, width, height);
> img.src = c.toDataURL();
> };
> img.onload = drawImage;
> 
> sampleImg.ondragstart = e => {
> e.target.style.opacity = 0.5;
> const copy = e.target.cloneNode(true);
> copy.id = 'stamp-image-drag-copy';
> const el = document.getElementById('sample-image-copy');
> copy.src = el.src;
> copy.style.width = el.width;
> copy.style.height = el.height;
> copy.style.padding = 0;
> copy.style.position = 'absolute';
> copy.style.top = '-1000px';
> copy.style.left = '-1000px';
> document.body.appendChild(copy);
> e.dataTransfer.setDragImage(copy, copy.width * 0.5, copy.height * 0.5);
> e.dataTransfer.setData('text', '');
> };
> 
> sampleImg.ondragend = e => {
> const el = document.getElementById('stamp-image-drag-copy');
> addStamp(e.target.src, dropPoint, el.getBoundingClientRect());
> e.target.style.opacity = 1;
> document.body.removeChild(document.getElementById('stamp-image-drag-copy'));
> e.preventDefault();
> };
> 
> sampleImg.onclick = e => {
> addStamp(e.target.src, {}, document.getElementById('sample-image-copy'));
> };
> 
> document.getElementById('file-open').onchange = e => {
> const fileReader = new FileReader();
> fileReader.onload = () => {
> const result = fileReader.result;
> const uploadImg = new Image();
> uploadImg.onload = () => {
> const imgWidth = 250;
> addStamp(result, {}, { width: imgWidth, height: (uploadImg.height / uploadImg.width) * imgWidth });
> };
> uploadImg.src = result;
> };
> if (e.target.files && e.target.files.length > 0) {
> fileReader.readAsDataURL(e.target.files[0]);
> }
> };
> });
> 
> ```

Regards,  
Tariq

---

<div class="post-metadata">

**Author:** ![Logan](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/logan/32/13_2.png) [@Logan](https://pdfjs.community/u/Logan)\
**Post date:** [September 8, 2020, 2:27pm UTC](https://pdfjs.community/t/opacity-parameter/241/2 "2020-09-08T14:27:43Z")

</div>

Hi there!

I cannot reproduce your error. When I drop the annotation on the page it appears at 0.5 opacity:

![image](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/1X/d590de42f61bf5c46adbc7e816a4dc7b9ad69b1f.png)

Do you see something different?

Thanks,  
Logan

---

<div class="post-metadata">

**Author:** ![tariqwater](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/tariqwater/32/176_2.png) [@tariqwater](https://pdfjs.community/u/tariqwater)\
**Post date:** [September 9, 2020, 6:26am UTC](https://pdfjs.community/t/opacity-parameter/241/3 "2020-09-09T06:26:38Z")

</div>

Hi Logan,

0.5 opacity should be like this:  
 ![expected](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/1X/48f4b1e5d935aad88903cce27972b0d2c7be6d0a.png)

Regards,  
Tariq

---

<div class="post-metadata">

**Author:** ![Logan](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/logan/32/13_2.png) [@Logan](https://pdfjs.community/u/Logan)\
**Post date:** [September 10, 2020, 2:06pm UTC](https://pdfjs.community/t/opacity-parameter/241/4 "2020-09-10T14:06:48Z")

</div>

Oh okay I see,

Thanks for the report! We will look into this.

---

<div class="post-metadata">

**Author:** ![tariqwater](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/tariqwater/32/176_2.png) [@tariqwater](https://pdfjs.community/u/tariqwater)\
**Post date:** [September 11, 2020, 11:21am UTC](https://pdfjs.community/t/opacity-parameter/241/5 "2020-09-11T11:21:30Z")

</div>

Hi Logan,

Firstly, Thanks.  
Then, as you may now further realized, weird behaviour found on dropped annotations.  
With my undisclosed code. When I drop the annotation on the page it appears at 0.5 opacity.  
But once I drag the annotation to somewhere else, it becomes back to 1.0 opacity.  
The value from style popup shows 0.5 opacity, while it appears solid.

Regards,  
Tariq

---

<div class="post-metadata">

**Author:** ![tariqwater](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/tariqwater/32/176_2.png) [@tariqwater](https://pdfjs.community/u/tariqwater)\
**Post date:** [September 30, 2020, 6:23am UTC](https://pdfjs.community/t/opacity-parameter/241/6 "2020-09-30T06:23:20Z")

</div>

Hi Logan,

The fix seems doesn’t included on [#announcements](https://pdfjs.community/c/announcements/5) or on the latest (7.1.0) version.

Regards,  
Tariq

---

<div class="post-metadata">

**Author:** ![Logan](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/logan/32/13_2.png) [@Logan](https://pdfjs.community/u/Logan)\
**Post date:** [September 30, 2020, 2:17pm UTC](https://pdfjs.community/t/opacity-parameter/241/7 "2020-09-30T14:17:44Z")

</div>

Hi!

Unfortunately this did not make it into 7.1 release as we had higher priority items to handle. We’ll look into fixing this next patch!

Thanks,  
Logan